nginx でクロスドメイン障害修復を構成する方法の例

nginx でクロスドメイン障害修復を構成する方法の例

Nginxのクロスドメイン設定は次のようには機能しません

サーバー{
  聞く 80;
  server_name ローカルホスト;
  
  # インターフェース転送場所 /api/ {
   # クロスドメインリクエストアドレス * をワイルドカードとして許可する add_header 'Access-Control-Allow-Origin' '*';
   # リクエストメソッドをクロスドメインに設定します。add_header 'Access-Control-Allow-Methods' 'GET、POST、OPTIONS、PUT、DELETE';
   # クッキーの送信を許可するかどうかを設定します。add_header 'Access-Control-Allow-Credentials' 'true';
   # リクエスト ヘッダーの設定。ここでワイルドカード文字を設定してみませんか? * add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token' はサポートされていないためです。
   # リバースプロキシを設定する proxy_pass 127.0.0.1:8081/;
  }
 }

インターネット上の nginx のクロスドメイン構成は主に上記のバージョンです。ただし、多くの人はそれをコピーするだけで、実際には実践していません。そのため、必要な人に盲目的にコピーせず、分析することを学ぶように思い出させるためにこの記事を書きました。

Nginxは次の設定を変更して有効にします

サーバー{
  聞く 80;
  server_name ローカルホスト;
  
  # インターフェース転送場所 /api/ {
   # クロスドメインリクエストアドレス * をワイルドカードとして許可する add_header 'Access-Control-Allow-Origin' '*';
   # リクエストメソッドをクロスドメインに設定します。add_header 'Access-Control-Allow-Methods' 'GET、POST、OPTIONS、PUT、DELETE';
   # クッキーの送信を許可するかどうかを設定します。add_header 'Access-Control-Allow-Credentials' 'true';
   # リクエスト ヘッダーの設定。ここでワイルドカード文字を設定してみませんか? * add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token' はサポートされていないためです。
   
   # オプションリクエスト処理を設定する if ( $request_method = 'OPTIONS' ) { 
    200を返します。
   }
   # リバースプロキシを設定する proxy_pass 127.0.0.1:8081/;
  }
 }

2つのコードの主な違いは次のコード行です。

$request_method = 'OPTIONS' の場合 
  200を返します。
}

ブラウザは、POST リクエストのオプション事前チェック リクエストを送信します。これは主にリクエスト ヘッダーをサーバーに送信します。サーバーが許可した場合は、実際の POST リクエストが送信されます。したがって、f12 は、POST が 2 つのリクエストを送信することが多いことを示しています。バックエンドの Java コードがオプション要求を処理しないため、オプション インターフェース要求は 403 禁止を報告します。ここで、nginx はインターフェース層に到達せずにオプション要求に直接 200 を返し、ポスト応答ヘッダーを直接許可します。これにより、上記の無効な構成が有効になる可能性があります。

ちょっとした知識ポイント

プロキシパス 127.0.0.1:8081/;

リバースプロキシに追加するかどうかの問題について;

http://localhost/api/user/login にアクセスします。

  • / を追加すると、実際のアクセスは 127.0.0.1:8081/user/login になります。
  • / がない場合、実際のアクセスは 127.0.0.1:8081/api/user/login になります。

スラッシュを追加すると、すべての /api リクエストがルート ディレクトリに転送され、/api が / に置き換えられます。この時点で、インターフェイス パスが変更され、/api のレイヤーが 1 つ減ります。スラッシュなしの場合はどうでしょうか?これは、ドメイン名 127.0.0.1:8081 に転送するときに /api パスが失われないことを意味します。

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

以下もご興味があるかもしれません:
  • NginxサーバーでAJAXクロスドメインリクエストを処理するための設定方法の説明
  • ドメイン間でフォントファイルを使用するための Nginx の詳細な設定
  • ドメイン間でフォントファイルを使用するように Nginx を設定する方法
  • Nginxサーバー構成はajaxのクロスドメイン問題を解決します
  • nginxサーバーは設定を通じてAPIのクロスドメイン問題を解決します
  • Nginx リバース プロキシ クロスドメインの基本設定とよくある誤解について詳しく説明します
  • Nginx 構成 クロスドメイン リクエスト Access-Control-Allow-Origin * 詳細な説明
  • Nginx のクロスドメイン アクセス シナリオの構成とアンチホットリンクの詳細
  • Nginx プロキシ転送構成を通じてクロスドメイン API プロキシ転送を実装する方法

<<:  JavaScriptのスタックとコピーの詳細な説明

>>:  新しく作成された MySQL ユーザーの % には localhost が含まれていますか?

推薦する

Linux でジャンプ サーバー経由でリモート サーバーに接続し、ファイルを転送する方法

最近、Linux ホストに環境を展開する際に多くの問題に遭遇しました。最初の問題は、ジャンプ サーバ...

Electronで不規則な形状の透明部分をクリックする実装

目次不規則なフォームの実装透明な部分をクリックする不規則なフォームの実装ここでは円形フォームを実装し...

mysql5.7.21 utf8 エンコーディングの問題と Mac 環境での解決方法

1. 目標: mysql の character_set_server の値を latin1 から ...

Vueが初めて要素を取得できなかったときの解決記録

序文Vue で要素を初回取得できない問題の解決方法は、ポップアップ ウィンドウで要素を取得するために...

Excelアップロード機能を実現するVue + iViewの完全コード

1. HTML部分 <Col span="2">ファイルをアップロー...

シンプルな広告ウィンドウを実現するjs

この記事では、参考までに、シンプルな広告ウィンドウを実装するためのjsの具体的なコードを紹介します。...

最新の高品質な英語無料フォント36個を公開

01. 無限フォントのダウンロード02. バンダフォントのダウンロード03. ロールアップフォントの...

Javascript実践におけるコマンドモードの詳しい説明

目次意味構造例カスタムショートカットキー元に戻すとやり直し録音と再生マクロ要約する意味リクエストをオ...

Windows 10 インストール vmware14 チュートリアル図

ソフトウェアのダウンロードソフトウェアのダウンロード リンク: https://pan.baidu....

Linuxグループの基礎知識ポイントまとめ

1. Linuxグループの基本紹介Linux では、すべてのユーザーはグループに所属する必要があり、...

DockerでのinfluxDB分散時系列データベースのインストールと関連操作について簡単に説明します。

influxDB の紹介influxDB は分散型時系列データベースです。 cAdvisor はリ...

ウェブサイトがhttpsを有効にした後のSSLのセキュリティ構成と検出

最近のウェブサイトでは SSL を有効にするのが標準となっています。ただし、SSL を設定した後も、...

Tomcat のセッションと Cookie の詳細な説明

序文HTTP はステートレスな通信プロトコルです。各リクエストは互いに独立しており、サーバーは以前の...

Vue でシンプルな無限ループスクロールアニメーションを実装する例

この記事では主に、Vue でシンプルな無限ループスクロールアニメーションを実装し、みんなで共有する例...

シンプルな CSS テキストアニメーション効果

成果を達成する 実装コードhtml <div id=コンテナ> いらっしゃいませ <...