序文 最近、小さなデモを作成しました。大規模な工場のオンライン データを使用したため、インターフェイスにクロスドメイン制限があり、これらの問題を解決するために 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 つのタイプに分類しています。
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 をご愛顧いただき、誠にありがとうございます。 以下もご興味があるかもしれません:
|
<<: MySQLで指定した時間前にレコードを自動的に削除する方法
目次JSONPとはJSONP 原則JSONP実装1. Ajaxでクロスドメインリクエストが行われると...
目次ミニプログラム開発者ツールのソースコードを表示する方法ミニプログラムアーキテクチャ設計1. ミニ...
1. Linuxに対応するRPMパッケージをダウンロードする5.6 より前のバージョンhttp://...
1. 環境整備:オペレーティング システム: CentOS Linux リリース 7.5.1804 ...
新しい公式サイトはオンラインですが、携帯電話で新しい公式サイトにアクセスすると、エクスペリエンスが非...
ステップ 1: メモ帳を使用して、MySQL インストール ディレクトリの「my.ini」ファイルを...
Baiduで検索しました。 。 chcp コマンドを使用して、cmd の文字エンコーディングを 65...
目次1. CSS のみを使用して作成したアニメーションのクリスマスツリー2. CSS のみを使用して...
この記事では、参考までに、シンプルなディスククロックを実装するためのjsの具体的なコードを紹介します...
以前は、角を丸くするのは非常に面倒でしたが、CSS3 では、角を丸くするのは非常に簡単になり、bor...
たとえば、次のように入力します。 XML/HTML コードdiv#ページ>(div#ヘッダー&...
目次データ量匿名マウントと名前付きマウントデータボリュームの場所データ量匿名マウントと名前付きマウン...
この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有して...
目次序文ステップ1: セットアップと前方屈折ステップ2: 反射とフレネル方程式ステップ3: 多面屈折...
最近Bステーションでスマートアンチブロッキング弾幕と呼ばれる弾幕エフェクトを見ました。これは伝説のマ...