2026年9月14日

NginxでCORS（クロスオリジン）を設定する方法

Webサーバー・Nginx

はじめに

Nginxは高性能なWebサーバーソフトウェアであり、多くのWebサイトやAPIのバックエンドとして使用されています。しかし、クロスオリジンリソース共有（CORS）ポリシーを正しく設定しないと、ブラウザからリモートのAPIへのアクセスが制限されてしまいます。この記事では、Nginxを使用してCORSを設定する方法について解説します。

症状・背景

NginxでCORSが必要な場面は以下のような状況です：

クライアント側がJavaScriptを使用し、他のドメインからAPIへのアクセスを行いたい場合
APIサーバーとクライアント間のオリジンが異なる場合
ブラウザによるポリシー制限に直面している場合

手順・設定方法

ステップ1: 基本的なCORS設定

# Nginxの配置ファイルを開く
sudo nano /etc/nginx/sites-available/default

# 全体にCORSヘッダーを適用するためのlocation設定追加
server {
    listen 80 default_server;
    server_name example.com;

    location / {
        # CORSヘッダーを追加
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

        # デフォルトの設定を追加
        include snippets/fastcgi-php.conf;

        # カスタムドキュメントルートの指定
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
    }
}

ステップ2: 認証と応答ヘッダー

# OPTIONSリクエスト用のlocation設定追加
server {
    listen 80 default_server;
    server_name example.com;

    location / {
        # CORSヘッダーを追加
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

        # OPTIONSリクエストに対する処理
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Length' 0;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            return 204;
        }

        # デフォルトの設定を追加
        include snippets/fastcgi-php.conf;

        # カスタムドキュメントルートの指定
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
    }
}

ステップ3: 複数オリジンへの対応

# ある特定のオリジンにのみアクセスを許可する場合
server {
    listen 80 default_server;
    server_name example.com;

    location / {
        # CORSヘッダーを追加
        add_header 'Access-Control-Allow-Origin' 'https://example.org';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

        # OPTIONSリクエストに対する処理
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'https://example.org';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Length' 0;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            return 204;
        }

        # デフォルトの設定を追加
        include snippets/fastcgi-php.conf;

        # カスタムドキュメントルートの指定
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
    }
}

ステップ4: 実践/トラブルシュート/監視

# Nginxを再起動して変更を反映させる
sudo systemctl restart nginx

# Nginxのログを確認する
tail -f /var/log/nginx/error.log

注意事項

CORS設定はセキュリティ上重要な部分であり、不適切な設定は脆弱性につながる可能性があります。
アクセス許可されたオリジンのみに制限することで、攻撃を防ぐことができます。
ログファイルの監視により、不正アクセスや異常なアクセスを早期発見することが可能です。

まとめ

1. 基本的なCORS設定: Nginx全体にCORSヘッダーを追加します。

2. 認証と応答ヘッダー: OPTIONSリクエストに対する適切なレスポンスを定義します。

3. 複数オリジンへの対応: 特定のオリジンのみにアクセスを許可する設定を行います。

4. 実践/トラブルシュート/監視: Nginxを再起動し、ログファイルを確認することで問題を早期発見します。

Post Views: 20