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