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

WBOY
リリース: 2023-08-04 22:57:08
オリジナル
2684 人が閲覧しました

サーバー構築のための 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
ログイン後にコピー
  1. 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 ヘッダー情報を追加します。さらに、必要に応じてルールを追加することもできます。

  1. 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!