Nginx CORSヘッダー設定

**CORS（Cross-Origin Resource Sharing）**は、どの外部ドメインがサーバーにリクエストを送信できるかを制御するブラウザのセキュリティメカニズムです。NginxでCORSヘッダーを設定することで、このクロスカッティングな関心事をアプリケーションコードから分離できます。

基本的なCORS設定

特定の信頼されたドメインからのクロスオリジンリクエストを許可するため、適切なレスポンスヘッダーを追加します：

location /api/ {
    add_header Access-Control-Allow-Origin "https://app.example.com" always;
    add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
    add_header Access-Control-Allow-Headers "Authorization, Content-Type" always;
    add_header Access-Control-Max-Age 86400 always;

    if ($request_method = OPTIONS) {
        return 204;
    }

    proxy_pass http://backend;
}

プリフライトリクエストの処理

ブラウザはカスタムヘッダーや非シンプルなHTTPメソッドを含むクロスオリジンリクエストの前にOPTIONSプリフライトリクエストを送信します。Nginxは204 No Contentステータスと必要なCORSヘッダーで応答する必要があります。Access-Control-Max-Age ヘッダーはプリフライト結果のキャッシュ期間を指定し、ラウンドトリップを削減します。

動的オリジンマッチング

安全でないワイルドカードを使わずに複数の特定オリジンを許可するには、map ブロックで条件付きにヘッダーを設定します：

map $http_origin $cors_origin {
    default "";
    "https://app.example.com" $http_origin;
    "https://staging.example.com" $http_origin;
}

location /api/ {
    add_header Access-Control-Allow-Origin $cors_origin always;
}

認証情報とCookie

APIがクロスオリジンリクエストでCookieや認証ヘッダーの送信を必要とする場合、credentialsヘッダーを追加する必要があります：

add_header Access-Control-Allow-Credentials "true" always;

Allow-Credentials が true の場合、Allow-Origin ヘッダーにワイルドカード（*）は使用できません。正確なオリジンドメインを指定する必要があります。

always パラメータ

各 add_header ディレクティブに always を追加すると、4xxや5xxエラーレスポンスを含むすべてのレスポンスコードにCORSヘッダーが含まれます。always なしでは成功レスポンスにのみヘッダーが追加され、バックエンドがエラーを返した際に混乱するCORSエラーの原因となります。

セキュリティ警告

認証済みや機密データを扱うAPIでは Access-Control-Allow-Origin: * の使用を避けてください。不正なクロスオリジンデータアクセスを防ぐため、許可オリジンを既知の信頼されたドメインに限定してください。