[Nginx] /api/*へのアクセスだけBasic認証をかけない

LaravelでVue.jsを使用したSPAサイトを作成していて、Basic認証とjwtトークン認証の組み合わせが必要だったのでメモ。

作ったもの

Vue.jsによるhtmlと、WebAPIによる非同期データ取得によるサイト構築を行った。

WebAPIエンドポイント
- APIの処理は全て、/api/*以下にまとめる
- jwtを使用した認証を行う
Vue.jsへのアクセス
- /api/*以外のアクセスは全て特定のhtml表示へ集中させ、Vue.jsで制御する
- ステージングサーバはBasic認証を行う

発生した事象

APIサーバのjwtのトークン認証では"Authorization: Bearer xxxx"のHTTPヘッダでトークン文字列を渡していた。

ローカル環境での開発では問題なく開発できた。

その後ステージング環境が必要になり、セキュリティ対策としてBasic認証を行うことになった。

Basic認証はNginxで以下のような設定をすることで対応した。

server {
  listen 80;
  auth_basic           "auth";
  auth_basic_user_file /foo/.htpasswd;
  root                 /foo/root;

  location / {
    try_files $uri $uri/ /index.php?$query_string;
  }
}

全アクセスに対してBasic認証を行ったところ、WebAPIで認証エラーが発生するようになった。

原因

Basic認証と、jwtトークン認証が共に"Authorization"のHTTPヘッダを使用するが、HTTPの仕様でAuthorizationは複数指定できないのが理由だった。今回の例ではaxiosを使ってWebAPI通信を行っていたが、Basic認証の情報がaxiosによるヘッダ設定で上書きされBasic認証エラーとなった。

対応

Nginxのconfigを書き換えることで/api以外に対するアクセスのみBasic認証するように変更した。

server {
  listen 80;

  location /api {
    satisfy any;
    allow   all;

    try_files $uri $uri/ /index.php?$query_string;
  }

  location / {
    auth_basic           "auth";
    auth_basic_user_file /foo/.htpasswd;
    root                 /foo/root;

    try_files $uri $uri/ /index.php?$query_string;
  }
}

Amazonでおトクに買い物する方法