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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Nginxサーバーにおけるマップモジュールの設定と使用方法の詳細な説明
  • Nginxのmapコマンドを使用してページをリダイレクトする
  • nginx を使用して Cookie のクロスドメイン アクセスを解決する方法
  • Nginxはアドレス転送時のクロスドメイン問題を解決します
  • Vue パッケージングは​​ Nginx プロキシを使用してクロスドメインの問題を解決します
  • nginx を使用してクロスドメイン問題を解決する方法 (Flask を例に)
  • Nginx で複数のドメイン名がドメインをまたいでアクセスできるようにマップを使用する方法

<<:  WeChatミニプログラムページ間の価値転送を実装する方法の例

>>:  MySQLをインストールして設定し、ルートパスワードを変更する方法

推薦する

TypeScript の基本型の紹介

目次1. 基本タイプ2. オブジェクトタイプ2.1 配列2.2 タプル2.3 オブジェクト3. 型推...

LinuxサーバーでRabbitMQ管理ページにアクセスできない問題を解決

私のプロジェクトの特定の機能ではサーバーが rabbitmq にメッセージを送信する必要があるため、...

Vue プロジェクトで mock.js を使用するための完全な手順

Vue プロジェクトで mock.js を使用する開発ツールの選択: Vscode 1. コマンドラ...

スプレッド演算子のサンプルコードと JavaScript での応用

スプレッド演算子を使用すると、式をある時点で展開できます。スプレッド演算子は、複数のパラメーター (...

ウィンドウ環境設定Mysql 5.7.21 windowx64.zip無料インストール版チュートリアル詳細説明

1. 公式サイトのmysqlダウンロードページからmysql-5.7.21-windowx64.zi...

MySQL ルートパスワードエラー番号 1045 の解決方法

MySQLサービスを停止するWindowsでは、マイコンピュータを右クリック--管理--サービスと...

ネイティブJSで禁止すべきメソッドの記述

目次ブロックレベル関数オブジェクトのプロトタイプを直接変更すると呼び出された人発信者評価ブロックレベ...

タブバーのいくつかの実装方法(推奨)

タブ: カテゴリ + 説明タグバー: カテゴリ => ユーザーに現在地と目的地を知らせる1. ...

Linux mpstat コマンドの使用方法の詳細な説明

1. mpstatコマンド1.1 コマンド形式 mpstat [ -A ] [ -u ] [ -V ...

MySQL Installer 8.0.21 インストール チュートリアル (画像とテキスト付き)

1. 理由新しいシステムに MySQL を再インストールする必要があったので、将来詳細を忘れた場合...

ie8/ie9/ie10/ie11 chrome firefox を区別するための CSS コード

ウェブサイトの互換性のデバッグは本当に面倒です。今日のウェブサイト デザイナーは、以前よりもはるかに...

CentOS 7.5 に Docker をインストールする詳細なチュートリアル

Docker入門Docker は、アプリケーションをより速く配信するのに役立つオープンソースのコンテ...

MySQL バイナリログデータ復旧: 誤ってデータベースを削除した場合の詳細な説明

MySQL Binログデータの回復: 誤ってデータベースを削除した場合前書き: テスト マシンで誤っ...

MySQL で珍しい文字を挿入できないときの対処方法 (文字列値が正しくない)

最近、ビジネス側から、一部のユーザー情報の挿入に失敗し、エラー メッセージが「不正な文字列値:&qu...

Mysql Explainコマンドの使用と分析

mysql explain コマンドは、MySQL がインデックスを使用して選択ステートメントを処理...