Vue プロジェクトの開発プロセスでは、ローカル デバッグの利便性のため、通常、vue.config.js で devServer を設定してローカルでサーバーを起動します。このオプションでは、プロキシ プロパティを設定して、ローカル (例: /api/action) に向けられたリクエストをバックエンド開発サーバー (例: http://xxx.xxx.xxx/api/action) にプロキシします。 開発サーバー: { ポート: 8081、 プロキシ: { '/api/アクション': { ターゲット: 'http://192.168.200.106:81', 変更元: true、 ws: 真、 安全: 偽 } } }, ``` この構成では、次の 2 つの点に注意してください。重複するインターフェース アドレスがある場合、一致度が最も低いものが最後に配置されます。 例えば:
次のように書くと: プロキシ: { '/': { ターゲット: 'http://192.191.1.1', 変更元: true、 ws: 真、 安全: 偽 }, '/api': { ターゲット: 'http://192.191.1.2', 変更元: true、 ws: 真、 安全: 偽 }, '/api/アクション': { ターゲット: 'http://192.191.1.3', 変更元: true、 ws: 真、 安全: 偽 } } すると、/、/api、/api/actionへのすべてのリクエストは192.191.1.1にプロキシされます。 その理由は、ここでのマッチングは実際には通常のマッチング プロセスであるためです。/api を要求すると、まず最初の構成項目を読み取り、構成内の / を使用して要求内の /api とマッチングします。要求された /api には構成項目 / が含まれていることがわかり、マッチングは成功します。要求は 192.191.1.1 に直接プロキシされます。/api/action のマッチングについても同様です。 つまり、その一致ルールは、構成項目のアドレスを使用して、リクエストのアドレスと一致させることです。リクエストのアドレスに構成のアドレスが含まれている場合、一致は成功します。それ以外の場合は、次の構成項目を選択して一致を続行します。 したがって、要求アドレスと一致する構成アドレスの文字数が少ないほど、一致度は低くなります。 上記の例では、設定内のアドレス (/) の 1 文字のみがリクエスト アドレス (/api) と一致するため、一致度は低くなります。 したがって、正しい書き方は次のようになります。 プロキシ: { '/api/アクション': { ターゲット: 'http://192.191.1.3', 変更元: true、 ws: 真、 安全: 偽 }, '/api': { ターゲット: 'http://192.191.1.2', 変更元: true、 ws: 真、 安全: 偽 }, '/': { ターゲット: 'http://192.191.1.1', 変更元: true、 ws: 真、 安全: 偽 } } このようにして、3つのアドレスへのリクエストは、対応するアドレスに正しくプロキシされる。 複数のアドレスが同じターゲットをプロキシする場合、それらをマージすることができます実際のアプリケーションでは、バックエンドはマイクロサービス モードで開発されるため、開発フェーズでは、異なるサービスを異なるアドレスにプロキシする場合があります。サービスの数が多い場合、プロキシの数も大きくなります。 プロキシ: { '/api/アクション': { ターゲット: 'http://192.191.1.3', 変更元: true、 ws: 真、 安全: 偽 }, '/api/action2': { ターゲット: 'http://192.191.1.4', 変更元: true、 ws: 真、 安全: 偽 }, '/api/action3': { ターゲット: 'http://192.191.1.3', 変更元: true、 ws: 真、 安全: 偽 }, '/api/action4': { ターゲット: 'http://192.191.1.4', 変更元: true、 ws: 真、 安全: 偽 }, '/api/action5': { ターゲット: 'http://192.191.1.5', 変更元: true、 ws: 真、 安全: 偽 }, '/api/action6': { ターゲット: 'http://192.191.1.6', 変更元: true、 ws: 真、 安全: 偽 }, '/api/action7': { ターゲット: 'http://192.191.1.5', 変更元: true、 ws: 真、 安全: 偽 }, '/api/action8': { ターゲット: 'http://192.191.1.6', 変更元: true、 ws: 真、 安全: 偽 }, '/api/action9': { ターゲット: 'http://192.191.1.7', 変更元: true、 ws: 真、 安全: 偽 }, '/api': { ターゲット: 'http://192.191.1.2', 変更元: true、 ws: 真、 安全: 偽 }, '/': { ターゲット: 'http://192.191.1.1', 変更元: true、 ws: 真、 安全: 偽 }, } 構成されたプロキシの数が 10 を超えると、開発環境でコンパイルおよびパッケージ化するときに次のエラーが報告されます。 エラーを解決し、コード サイズを削減するために、同じターゲットを持つ構成項目をマージすることができます。上記からわかるように、これは実際には通常のマッチング プロセスなので、通常の構文を使用してマージできます。 プロキシ: { '/api/アクション|/api/アクション3': { ターゲット: 'http://192.191.1.3', 変更元: true、 ws: 真、 安全: 偽 }, '/api/action2|/api/action4'': { ターゲット: 'http://192.191.1.4', 変更元: true、 ws: 真、 安全: 偽 }, '/api/アクション5|/api/アクション7': { ターゲット: 'http://192.191.1.5', 変更元: true、 ws: 真、 安全: 偽 }, '/api/アクション6|/api/アクション8': { ターゲット: 'http://192.191.1.6', 変更元: true、 ws: 真、 安全: 偽 }, '/api/action9': { ターゲット: 'http://192.191.1.7', 変更元: true、 ws: 真、 安全: 偽 }, '/api': { ターゲット: 'http://192.191.1.2', 変更元: true、 ws: 真、 安全: 偽 }, '/': { ターゲット: 'http://192.191.1.1', 変更元: true、 ws: 真、 安全: 偽 }, } もちろん、正式に導入された場合でも、バックエンドは統合エージェントとして機能する必要があります。 上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MYSQLでプロシージャの名前を変更する方法の詳細な説明
目次1. 問題の背景2. 仮想マシン ネットワーク カードの接続方法は何ですか? 2.1 NAT 2...
目次1. シナリオ2. 基盤となるAPIを簡素化する2.1 自動的に破棄を呼び出す2.2 VM値を作...
本日、ローカル開発環境で突然「入力ファイルが指定されていません」というエラーが発生してしまいました。...
Python 3のインストール1. 依存環境をインストールするPython3 はインストール プロセ...
目次序文InnoDB ストレージ アーキテクチャInnodb テーブルスペースインドストレージディス...
JavaScriptコントロールを使用したくない場合は、次の方法を試してください。 Safariブラ...
-9999 ピクセルの画像置換技術は、ここ 10 年近く人気があります。テキスト要素を画像に置き換え...
JavaとMysql 8.0.18バージョンの接続方法については、参考までに具体的な内容は以下のとお...
MACはmysql8.0をインストールします。具体的な内容は次のとおりです。 1. ダウンロードアド...
時は経つのが早く、わずか 6 日後には 2013 年が歴史になります。今年は、いわゆるトレンドが多す...
最近、あるプロジェクトに取り組んでいたとき、自分のプロジェクトでは CSS3 のアニメーション技術を...
この記事では、centos6.6 で php7 + nginx 環境をインストールする方法について説...
この記事では、例を使用して、MySQL ストアド プロシージャにおけるカーソル (DECLARE) ...
毎日の統計情報を取得するプロジェクトを実行する際、プロジェクト ログを分析する必要があります。要件の...
この記事の例では、画像比較を実現するためのjQueryプラグインの具体的なコードを参考までに共有して...