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

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

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

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

サーバーへのクロスドメインアクセスの構成
他のドメイン名からのアクセスを承認するには、まずクロスドメインアクセス構成を 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

ログイン後にコピー

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 ヘッダー情報を追加します。さらに、必要に応じてルールを追加することもできます。

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 は柔軟で信頼性の高いソリューションを提供できます。

参考文献: