NginxでCROSエラーを解決する設定方法

目次

前提

  • HTML/CSS/JavaScriptはオリジンサーバーから取得
  • 各種データはAPIサーバーから取得
  • APIサーバーへのリクエストURLは/api にアクセスする

設定

        location /api {
            add_header Access-Control-Allow-Origin '*' always;
            add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
            add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
            add_header Access-Control-Allow-Credentials true;
            proxy_pass http://<APIのIPアドレス or ドメイン>;
        }

解説

  • /api にアクセスがあった場合にadd_headerを使用して、各種ヘッダー情報を付与する。
  • Access-Control-Allow-Origin を’*’で設定することで全てのオリジンからのアクセスを許可する。本番環境では対象サーバを絞りましょう。
  • Access-Control-Allow-Methods で実際のリクエストおよびpreflight時の対象HTTPメソッドを指定しています。
  • Access-Control-Allow-Headers で実際のリクエストおよびpreflight時の対象HTTPヘッダーを指定します。
  • proxy__passを設定し、NginxがリバースプロキシとしてAPIにリクエストを行う。Access-Control-Allow-Origin
  • システム開発、アプリ開発
  • マッチングアプリ開発
  • インフラ構築支援等、なんでもご相談ください。
よかったらシェアしてね!
  • URLをコピーしました!
目次