Nginx サーバーをセットアップするためのクロスドメイン アクセス構成および CORS プロトコル サポート ガイド

サーバー構築のための Nginx クロスドメイン アクセス構成および CORS プロトコル サポート ガイド

はじめに:
現在の Web アプリケーション開発では、クロスドメイン リクエストが一般的な要件になっています。セキュリティを確保するために、ブラウザーはデフォルトで AJAX リクエストを介したクロスドメイン操作を制限します。 CORS (Cross-Origin Resource Sharing) プロトコルは、クロスドメイン アクセスの制御可能な承認を実現する信頼性の高いソリューションを開発者に提供します。

Nginx は、高性能 Web サーバーおよびリバース プロキシ サーバーです。この記事では、Nginx を使用してサーバーのクロスドメイン アクセス構成と CORS プロトコルのサポートを構築する方法を紹介します。

1. サーバーへのクロスドメイン アクセスの構成
   他のドメイン名からのアクセスを承認するには、まずクロスドメイン アクセス構成を Nginx 構成ファイルに追加する必要があります。 Nginx 設定ファイル (通常は /etc/nginx/nginx.conf) を開き、http セクションに次の設定を追加します。

http {
    ...
    
    # 允许跨域访问
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header Access-Control-Expose-Headers 'Content-Length,Content-Range';
}

上記の設定により、すべてのドメイン名 (*) からのアクセスが許可され、サポートされます。 GET、POST、OPTIONS メソッド。同時に、いくつかの共通のリクエストヘッダー情報も指定します。

設定ファイルを保存して終了した後、Nginx 設定を再ロードして有効にします。

$ sudo nginx -s reload

2. CORS プロトコル サポートを設定します
   クロスドメイン アクセス設定をCORS プロトコルのサポートは、より詳細な方法で構成することもできます。以下は、指定されたドメイン名へのクロスドメイン アクセスのみを許可する設定例です。

http {
    ...
    
    # 配置CORS
    map $http_origin $allowed_origin {
        default "";
        ~^https?://(www.)?example.com$ $http_origin;
        ~^https?://(www.)?example.net$ $http_origin;
    }
    
    server {
        ...
        
        location / {
            if ($allowed_origin != "") {
                add_header 'Access-Control-Allow-Origin' $allowed_origin;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            }
            
            ...
        }
    }
}

上記の設定では、map ディレクティブを使用して を定義します。 $allowed_origin変数。クロスドメイン アクセスを許可するドメイン名を格納するために使用されます。 location / は server ブロックで構成され、if ディレクティブは、現在のリクエスト ソースのドメイン名が許可リストに含まれているかどうかを判断するために使用されます。その場合は、対応する CORS ヘッダー情報を追加します。さらに、必要に応じてルールを追加することもできます。

3. CORS リクエストのプリフライト
   場合によっては、クロスドメインリクエストにはプリフライト操作が必要です。たとえば、カスタム リクエスト ヘッダー情報または非単純リクエスト (PUT、DELETE など) が使用される場合です。プリフライト リクエストは、実際のリクエストに対するサーバーの承認を取得するために、実際のリクエストの前に送信される OPTIONS リクエストです。

プリフライトリクエストをサポートするには、location / ブロックに次の設定を追加するだけです。

location / {
    ...
    
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $allowed_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

        return 204;
    }
    
    ...
}

上記の設定では、 request メソッドが OPTIONS の場合、204 (No Content) を返し、CORS ヘッダー情報を追加します。

結論:
上記の構成により、サーバーのクロスドメイン アクセス構成と CORS プロトコルのサポートを簡単に構築できます。単純なクロスドメイン リクエストであっても、複雑なプリフライト リクエストであっても、Nginx は柔軟で信頼性の高いソリューションを提供できます。

参考文献:

• [Nginx 公式ドキュメント](https://nginx.org/en/docs/)
• [CORS 公式ドキュメント](https : //developer.mozilla.org/en-US/docs/Web/HTTP/CORS)

以上がNginx サーバーをセットアップするためのクロスドメイン アクセス構成および CORS プロトコル サポート ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。