Nginx リバース プロキシを使用してクロスドメイン問題を解決する方法の詳細な説明

質問

前回のクロスドメイン リソース共有に関する記事では、ドメイン間で Cookie を送信する場合、Access-Control-Allow-Origin を * に設定することはできず、要求された Web ページと一致する明確なドメイン名を指定する必要があることを説明しました。このような問題は、このプロジェクトの開発中に他の人と共同作業しているときに発生しました。

解決

1. 一般的には、バックエンドとの CORS クロスドメインリソース共有を使用して、アクセスするドメイン名に Access-Control-Allow-Origin を設定することができます。これにはバックエンドの協力が必要であり、一部のブラウザではサポートされていません。
2. パートナーのバックエンドとの連携に基づいて、nginxプロキシを使用してブラウザの相同性ポリシーを満たし、クロスドメインを実現します。

実装

リバースプロキシの概念

リバースプロキシ方式とは、インターネット上の接続要求をプロキシサーバーで受け付け、内部ネットワーク上のサーバーに転送し、サーバーから取得した結果をインターネット上の接続要求元のクライアントに返す方式です。このとき、プロキシサーバーは外部からはサーバーのように見えます。リバース プロキシ サーバーはクライアントには元のサーバーと同じように見えるため、クライアントは特別な構成を実行する必要はありません。クライアントはリバース プロキシの名前空間内のコンテンツに通常の要求を送信し、リバース プロキシは要求を転送する場所 (元のサーバー) を決定し、コンテンツが元々クライアントに属していたかのように、取得したコンテンツをクライアントに返します。

nginxリバースプロキシを使用してクロスドメインを実装する手順

nginxの公式サイトにアクセスしてパッケージをダウンロードし、nginx環境を構築します。

nginx設定ファイルを変更し、ngixn.confファイルを見つけて関連する設定を変更します。

http {
 mime.types を含めます。
 デフォルトタイプ アプリケーション/オクテットストリーム;

 ファイル送信オン;

 サーバー{
  listen 8000; #ポート8000​​をリッスンします。他のポートに変更することもできます server_name localhost; #現在のサービスの場所のドメイン名 /wili/api/ {
    proxy_pass http://chick.platform.deva.wili.us/api/; #アクセスパスが /will/api として記録されたプロキシ構成を追加します proxy_http_version 1.1;
  }
  
  位置 / {
    proxy_pass http://localhost:8001;
    プロキシ_http_バージョン 1.1;
  }
  
  エラーページ 500 502 503 504 /50x.html;
  場所 = /50x.html {
   ルートhtml;
  }

 }

}

構成の説明:

• 設定情報から、nginx が localhost のポート 8000 を listen し、Web サイト A と Web サイト B へのアクセスが localhost のポート 8000 を介して行われることがわかります。
• 「will/api」で始まるすべてのアドレスが処理のために「http://chick.platform.deva.wili.us/api/」に転送されるように、「/will/api」のアクセスを特別に構成しました。
• アクセスアドレスの変更

nginx を設定したので、すべてのアクセスは元の Web サイト アドレス (Web サイト A は localhost:8001、Web サイト B は http://chick.platform.deva.wili.us/api/) ではなく nginx を経由する必要があります。したがって、Web サイト A のリクエスト インターフェイスを http://localhost:8000/wili/api/ に変更する必要があります。次に、nginxを起動し、設定された8000にアクセスします。

注意すべき点は、nginx を起動するとポートの競合が発生し、起動に失敗する可能性があることです。タスク マネージャーで起動が成功したかどうかを確認できます。

要約する

クロスドメイン ブラウザの問題を解決する方法は多数あります。

1. jsonpでは、ターゲットサーバーがコールバック関数と連携する必要がある。
2. CORSでは、サーバーがヘッダーを設定する必要があります: Access-Control-Allow-Origin
3. nginx リバースプロキシ方式はあまり言及されませんが、対象サーバーの協力を必要としません。ただし、リクエストを転送するためのトランジット nginx サーバーを構築する必要があります。 (リバースプロキシを使用すると、Web ページへのアクセスが以前よりも遅くなる可能性があります)

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。