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にリクエストを行う。