Nginx プロキシ サーバーを介してクロスオリジン リソース共有 (CORS) サポートを実装するにはどうすればよいですか?

Nginx プロキシ サーバーを介してクロスドメイン リソース共有 (CORS) サポートを実装するにはどうすればよいですか?

はじめに:
Cross-Origin Resource Sharing (CORS) は、サーバーが特定のリソースへのアクセス権を付与できるようにするメカニズムです。実際のアプリケーションでは、Nginx プロキシ サーバーを介してリソース共有を実現する必要があることがよくありますが、この記事では、Nginx 構成を通じて CORS をサポートする方法を紹介します。

ステップ 1: Nginx のインストールと構成

1. Nginx のインストール
まず、Nginx がサーバーにインストールされていることを確認します。インストールされていない場合は、オペレーティング システムに応じて適切なインストール方法を選択してください。

2. Nginx 設定ファイルの編集
テキスト エディタを使用して、通常は /etc/nginx/nginx.conf または /etc/ にある Nginx 設定ファイルを開きます。 nginx/conf.d/default.conf。

3. CORS 設定の追加
設定ファイルの server ブロックに次のコードを追加して、CORS サポートを有効にします:

location / {
    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-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    if ($request_method = 'POST') {
        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-Expose-Headers' 'Content-Length,Content-Range';
    }
    if ($request_method = 'GET') {
        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-Expose-Headers' 'Content-Length,Content-Range';
    }
}

上記の設定では、オリジンリクエストはクロスドメインアクセスを行い、共通のリクエストメソッド (GET、POST、OPTIONS) を許可します。 「Access-Control-Allow-Headers」は許可される要求ヘッダーを指定し、「Access-Control-Expose-Headers」は許可される応答ヘッダーを指定します。

4. Nginx を保存して再起動する
設定ファイルを保存し、Nginx サービスを再起動して、設定を有効にします。次のコマンドを使用して Nginx を再起動できます。

sudo service nginx restart

ステップ 2: CORS サポートのテスト

CORS 構成の有効性を確認するために、ブラウザーの開発ツールを使用して、リクエストおよびレスポンスのヘッダー情報。

1. ブラウザ開発ツールを開きます
ブラウザで開発ツールを開き (通常は F12 キーを押します)、[ネットワーク] タブに切り替えます。

2. クロスドメイン リクエストの送信
JavaScript コードを通じてクロスドメイン リクエストを送信するか、ブラウザのアドレス バーにクロスドメイン アドレスを直接入力します。たとえば、Nginx プロキシ サーバーのアドレスが http://example.com で、アクセスしたいクロスドメイン URL が http://api.example.com であると仮定します。 /データ＃＃ ＃。

3. リクエスト ヘッダーとレスポンス ヘッダーの表示

開発者ツールの [ネットワーク] タブで、対応するリクエストを選択し、クリックして詳細を展開します。
Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers#は、要求ヘッダーと応答ヘッダーに含まれています。 # CORS サポートを確認するためのその他の関連ヘッダー情報。 概要:

Nginx を構成することで、クロスドメイン リソース共有 (CORS) サポートを簡単に実装できます。 Nginx 構成ファイルにヘッダー情報を追加するだけで、Nginx プロキシ サーバーが CORS をサポートできるようになります。これにより、クロスドメインリクエストが異なるドメイン間で適切に動作することが保証されます。

以上がNginx プロキシ サーバーを介してクロスオリジン リソース共有 (CORS) サポートを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。