Nginx クロスオリジン リソース共有 (CORS) 構成を実装する方法

Nginx のクロスドメイン リソース共有 (CORS) 構成を実装するには、特定のコード例が必要です

フロントエンドとバックエンドの分離開発の人気により、 -ドメイン リソース共有 (CORS) ) の問題が共通の課題になりました。 Web 開発では、ブラウザーの同一オリジン ポリシーの制限により、クライアント側の JavaScript コードは、そのコードが配置されているページと同じドメイン名、プロトコル、およびポートを持つリソースのみを要求できます。ただし、実際の開発では、異なるドメイン名または異なるサブドメインからリソースをリクエストする必要が生じることがよくあります。現時点では、CORS を使用してクロスドメインの問題を解決する必要があります。

Nginx は、静的リソースとプロキシ リクエストを提供するリバース プロキシ サーバーとして構成できる強力なオープン ソース Web サーバー ソフトウェアです。 Nginx に CORS 構成を実装すると、フロントエンドのクロスドメインの問題を解決できます。以下では、Nginx で CORS を設定および実装する方法を詳しく紹介します。

まず、次のコード ブロックを Nginx 構成ファイルに追加します。

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,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        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 = 'GET') {
        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';
    }
    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,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
}

上記のコードでは、add_header ディレクティブを使用して応答ヘッダー情報を設定し、実装します。 CORS 構成。具体的には、Access-Control-Allow-Origin ヘッダーが # に設定され、すべてのオリジンが許可されることを示します。次に、リクエスト メソッドが GET、POST、OPTIONS になるように Access-Control-Allow-Methods ヘッダーを設定します。次に、contentType が application/json およびその他の形式のリクエストをサポートするために、Access-Control-Allow-Headers ヘッダーを設定します。最後に、Access-Control-Expose-Headers ヘッダーを使用して、サーバーが返すことができるリクエスト ヘッダーを設定します。

次に、Nginx サーバーを再起動して、構成を有効にします。

設定が完了すると、Nginx は、対応するヘッダー情報セットに基づいて、CORS 関連のヘッダー情報を応答に追加します。このようにして、ブラウザーがクロスドメイン リクエストを開始すると、サーバーはこれらのヘッダー情報を返し、ブラウザーはクロスドメイン リクエストを通常どおり処理できます。

CORS 構成のオープンな性質により、セキュリティ リスクが発生する可能性があることに注意してください。必要に応じて、特定のビジネス ニーズに基づいて、Access-Control-Allow-Origin ヘッダーの値を正当なドメイン名に制限できます。このようにして、指定されたドメイン名のみがドメイン間でサーバー リソースを要求できます。

要約すると、Nginx を使用して CORS を構成すると、フロントエンドのクロスドメインの問題を効果的に解決できます。対応するレスポンスヘッダー情報を設定することで、より柔軟なクロスドメインリソース共有を実現できます。この記事が皆さんのお役に立ち、クロスドメイン開発の楽しさを楽しんでいただければ幸いです。

以上がNginx クロスオリジン リソース共有 (CORS) 構成を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。