Nginx プロキシ axios リクエストと注意事項

Nginx プロキシ axios リクエストと注意事項

序文

最近、小さなデモを作成しました。大規模な工場のオンライン データを使用したため、インターフェイスにクロスドメイン制限があり、これらの問題を解決するために Nginx プロキシを使用しました。

1. nginx.conf 設定情報

nginx.conf には多くの設定情報が含まれているため、この記事では axios と静的リソース リクエストの設定にのみ焦点を当て、一般的な設定項目についてもいくつか説明します。具体的な設定は以下の通りです。

# http サーバーを設定し、そのリバースプロキシ機能を使用して負荷分散サポートを提供します http {
 #接続タイムアウト keepalive_timeout 120;
 
 #gzip 圧縮スイッチと関連構成 gzip オン;
 gzip_min_length 1k;
 gzip_バッファ 4 32k;
 gzip_http_バージョン1.1;
 gzip_comp_レベル2;
 gzip_types テキスト/プレーン アプリケーション/x-javascript テキスト/css アプリケーション/xml;
 gzip_vary オン;
 gzip_disable "MSIE [1-6].";

 #実際のサーバーリストを設定するアップストリームzp_server{
 サーバー 127.0.0.1:8089;
 }
 
 #HTTP サーバー {
 #ポート80をリッスン
 
 #サービス名を定義します server_name localthost;
 
 #ホームページインデックス index.html
 
 #プロジェクトのルートディレクトリルート D:\project\src\main\webapp をポイントします。
 
 #エンコード形式 charset utf-8;
 
 #プロキシパス(アップストリームにバインド)、location location / {の後にマップされたパスを設定します
  #プロキシ設定パラメータ proxy_connect_timeout 180;
  プロキシ送信タイムアウト 180;
  プロキシ読み取りタイムアウト 180;
  proxy_set_header ホスト $host;
  proxy_set_header X-Forwarder-For $remote_addr;
  proxy_pass http://zp_server/;
  
  #クロスドメイン関連の設定 add_header 'Access-Control-Allow-Origin' '*' always;
  add_header 'Access-Control-Allow-Credentials' 'true';
  add_header 'Access-Control-Allow-Headers' 'Origin、X-Requested-With、Content-Type、Accept' を常に追加します。
  }
  
  #js css ファイルをロードしてアクセスできない問題を解決するために、静的リソースを構成します。最後に / があってはならないことに注意してください。
  場所 ~ .*\.(js|css|jpg|png)$ {
  proxy_pass http://zp_server;
  } 
 }
}

2. proxy_passのスラッシュ問題

Nginx の公式 Web サイトでは、proxy_pass を 2 つのタイプに分類しています。

  • 1 つは、proxy_pass http://localhost:8080 のように IP とポート番号のみを含める方法です (ポートの後の / も含めず、ここには特に注意してください)。この方法は、URI なしの方法と呼ばれます。
  • もう一方のタイプには、ポート番号の後に他のパスが続きます。これには、proxy_pass http://localhost:8080/ のように単一の / のみが含まれるパスや、proxy_pass http://localhost:8080/abc のような他のパスが含まれます。

2.1 URIのないメソッドの場合

URI のないメソッドの場合、Nginx は場所のパス部分を保持します。例:

場所 /api1/ {
 proxy_pass http://localhost:8080;
}

http://localhost/api1/xxx にアクセスすると、http://localhost:8080/api1/xxx にプロキシされます。

2.2 URI方式の場合

URI メソッドの場合、nginx は alias などの置換メソッドを使用して URL を置き換えます。この置換はリテラル置換のみです。次に例を示します。

場所 /api2/ {
 proxy_pass http://localhost:8080/;
}

http://localhost/api2/xxx にアクセスすると、http://localhost/api2/ (最後の / に注意) が http://localhost:8080/ に置き換えられ、残りの xxx が追加されて、http://localhost:8080/xxx になります。

2.3 まとめ

サーバー{
 聞く 80;
 server_name ローカルホスト;

 場所 /api1/ {
  proxy_pass http://localhost:8080;
 }
 # http://localhost/api1/xxx -> http://localhost:8080/api1/xxx


 場所 /api2/ {
  proxy_pass http://localhost:8080/;
 }
 # http://localhost/api2/xxx -> http://localhost:8080/xxx


 場所 /api3 {
  proxy_pass http://localhost:8080;
 }
 # http://localhost/api3/xxx -> http://localhost:8080/api3/xxx


 場所 /api4 {
  proxy_pass http://localhost:8080/;
 }
 # http://localhost/api4/xxx -> http://localhost:8080//xxx、ここで二重スラッシュに注意し、慎重に分析してください。


 場所 /api5/ {
  proxy_pass http://localhost:8080/haha;
 }
 # http://localhost/api5/xxx -> http://localhost:8080/hahaxxx。hahaとxxxの間にスラッシュがないことに注意してください。理由を分析してみましょう。

 場所 /api6/ {
  proxy_pass http://localhost:8080/haha/;
 }
 # http://localhost/api6/xxx -> http://localhost:8080/haha/xxx

 場所 /api7 {
  proxy_pass http://localhost:8080/haha;
 }
 # http://localhost/api7/xxx -> http://localhost:8080/haha/xxx

 場所 /api8 {
  proxy_pass http://localhost:8080/haha/;
 }
 # http://localhost/api8/xxx -> http://localhost:8080/haha//xxx、ここでは二重のスラッシュに注意してください。
}

要約する

以上がこの記事の全内容です。この記事の内容が皆様の勉強や仕事に何らかの参考学習価値をもたらすことを願います。123WORDPRESS.COM をご愛顧いただき、誠にありがとうございます。

以下もご興味があるかもしれません:
  • Vue.js の Vuex + axios を使ったリクエスト送信の実用的使い方の詳細説明
  • vue で HTTP 送信リクエストを処理する axios の例 (post と get)
  • VUE axios でクロスドメインリクエストを送信するときに注意する必要がある問題
  • Vue axios 同期リクエストソリューション
  • Vue axios リクエストのタイムアウトの正しい処理
  • Vue が axios を使用して投稿リクエストを送信し、Cookie を自動的に設定する詳細な説明
  • Vue での Ajax リクエストに Axios を使用する詳細な説明
  • Vue-cli axios リクエストメソッドとクロスドメイン処理の問題
  • axios が POST リクエストを送信し、400 ステータス コードを返す問題を解決する
  • axios クロスドメイン リクエスト エラーの問題に対する完璧な解決策

<<:  MySQLで指定した時間前にレコードを自動的に削除する方法

>>:  Reactのref属性を深く理解する方法

推薦する

1つの記事でJSONPの原理と応用を理解する

目次JSONPとはJSONP 原則JSONP実装1. Ajaxでクロスドメインリクエストが行われると...

ミニプログラム開発ツールのソースコードからの基本実装の分析

目次ミニプログラム開発者ツールのソースコードを表示する方法ミニプログラムアーキテクチャ設計1. ミニ...

CentOS 6.5 に MySQL 5.6 をインストールするチュートリアル

1. Linuxに対応するRPMパッケージをダウンロードする5.6 より前のバージョンhttp://...

Centos7.5 は mysql5.7.24 バイナリ パッケージの展開をインストールします

1. 環境整備:オペレーティング システム: CentOS Linux リリース 7.5.1804 ...

異なるドメイン名への PC または携帯電話のアクセスを区別するように Nginx を構成する方法

新しい公式サイトはオンラインですが、携帯電話で新しい公式サイトにアクセスすると、エクスペリエンスが非...

Windows システムの MySQL が中国語を入力および表示できない問題の解決方法

ステップ 1: メモ帳を使用して、MySQL インストール ディレクトリの「my.ini」ファイルを...

CMD で MySQL データベースを操作するときに中国語の文字化けが発生する問題の解決方法

Baiduで検索しました。 。 chcp コマンドを使用して、cmd の文字エンコーディングを 65...

JavaScript によるダイナミッククリスマスツリーの詳細な説明

目次1. CSS のみを使用して作成したアニメーションのクリスマスツリー2. CSS のみを使用して...

jsを使ってシンプルなディスククロックを実現する

この記事では、参考までに、シンプルなディスククロックを実装するためのjsの具体的なコードを紹介します...

CSS3 border-radius 丸角の実装方法と使い方の詳しい説明

以前は、角を丸くするのは非常に面倒でしたが、CSS3 では、角を丸くするのは非常に簡単になり、bor...

editplus の Zen コーディング例コードの説明

たとえば、次のように入力します。 XML/HTML コードdiv#ページ>(div#ヘッダー&...

Dockerの匿名マウントと名前付きマウントの具体的な使用法

目次データ量匿名マウントと名前付きマウントデータボリュームの場所データ量匿名マウントと名前付きマウン...

vuex ベースのショッピングカート機能の実装

この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有して...

threejs でリアルタイムポリゴン屈折を実装する方法

目次序文ステップ1: セットアップと前方屈折ステップ2: 反射とフレネル方程式ステップ3: 多面屈折...

CSS3はマスク連打機能を実現する

最近Bステーションでスマートアンチブロッキング弾幕と呼ばれる弾幕エフェクトを見ました。これは伝説のマ...