Nginx CORS対応で複数ドメインを許可する

課題

SPAサービスを作るにあたり、APIとWebでドメインが異なるのでCORS対応をしたい。 かつ検品環境なのでlocalホストからのアクセスも許可したい。

環境

• nginx version: nginx/1.14.0 (Ubuntu)

対応

Access-Control-Allow-Origin に同時に複数のドメインを記述するとエラーになる。そのため、送信元のドメインに応じた 処理の記述が必要になる。

ネット上にCORS対応の記述はたくさん転がっているものの、if文を使ったものだとどうにも動作しなかった。 最終的にうまくいったのはこちら。

map $http_origin $cors_header {
    default "";
    "~^https?://(localhost:3000|hoge\.fuga\.jp)" "$http_origin";
}
server {
      location / {
          add_header Access-Control-Allow-Origin $cors_header;
      }
}

CORS対応全体としては Access-Control-Allow-Origin 以外にも記述が必要。 こうやって皆がコードの断片しか書かないから自分のとこでは上手くいかないという人が多いのだろう

参考

www.jfabre.com