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をインストールして設定し、ルートパスワードを変更する方法

推薦する

Vueはドラッグプログレスバーを実装します

この記事では、ドラッグプログレスバーを実現するためのVueの具体的なコードを例として紹介します。具体...

Mysqlは日付範囲の抽出方法を指定します

データベースを操作する過程では、いくつかの指標を日付別にまとめたり、一定期間内の合計金額をカウントし...

UbuntuはPythonスクリプトのサンプルコードを定期的に実行する

オリジナルリンク: https://vien.tech/article/157序文この記事では、Ub...

Vue 親コンポーネントが子コンポーネント関数の実装を呼び出す

Vue親コンポーネントは子コンポーネントの関数を呼び出す親コンポーネントはイベントを通じて子コンポー...

HTML でフォーム入力やその他のテキスト ボックスを読み取り専用にして編集不可にする方法

場合によっては、フォーム内のテキスト ボックスを読み取り専用にして、ユーザーがその中の情報を変更でき...

Idea は、Web プロジェクトを開始するように Tomcat を設定します。グラフィック チュートリアル

tomcatの設定1. 実行構成をクリック 2. tomcat localを選択 3. tomcat...

組み込み Linux で QT アプリケーションを再起動する簡単な方法 (QT4.8 qws ベース)

アプリケーション ソフトウェアには通常、次のようなビジネス要件があります。新しいバージョンの APP...

HTML リンク アンカー タグと SEO におけるその役割の概要

<a> タグは主に、ハイパーリンクまたはアンカー リンクとも呼ばれるリンクとブックマーク...

バックエンドの権限に基づいてナビゲーション メニューを動的に生成する Vue-router のサンプル コード

目次js の1. グローバルガードを登録する2. Vuex 状態管理グローバルキャッシュルート3. ...

Linuxカーネルマクロcontainer_ofの詳細な分析

1. 前述の通り数年前、Linux ドライバーのコードを読んでいたときにこのマクロを見ました。長い間...

HTML入力ドロップダウンメニューを実装する方法

コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...

Dockerコンテナの個別展開のためのLNMPの実装

1. 環境整備各コンテナの IP アドレス: nginx: 172.16.10.10マイSQL: 1...

HTML の色に関する参考資料

HTML では、色は 2 つの方法で表現されます。 1 つは、青の場合は blue のように色の名前...

DockerはRedis5.0をビルドし、データをマウントします

目次1. 永続データの簡単なマウント2. DockerFileでイメージをビルドし、設定ファイルを指...

HTML コード作成ガイド

共通コンベンションタグ自己終了タグ。閉じる必要はありません (例: img input br hr ...