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でプロシージャの名前を変更する方法の詳細な説明
アプリケーションや Web サイトのパフォーマンスが成功の重要な要素であることは誰もが知っています。...
序文正直に言うと、最近とても混乱していると感じています。テクノロジーと人生について。また、将来の発展...
1. ROW_NUMBER()定義: ROW_NUMBER() 関数は、select によってクエリ...
スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを...
目次1. インストール2. プロジェクトにインポートしてマウントする3. 使用Vue2.x はコンポ...
ダウンロードしたバージョンは、Zip 解凍版、Windows システムです。長い間 Windows ...
問題の説明:たとえば、ファイル 11 の内容は次のとおりです。こんにちはファイル22の内容は次のとお...
Web ページを作成するときに、特定のフォントを使用したい場合は、 @font-faceを介して参照...
指導トピックウェブページ適用グレード高校2年生授業時間1 クラス教科書分析焦点: 静的および動的ウェ...
最近、モバイルページを制作する際には、レイアウトにインラインブロック要素がよく使われますが、インライ...
この記事では、セキュリティ、使用方法、同時処理などを通じて、MySQL トランザクションとデータの一...
最初のステップは、MySQL 8.0.23の無料インストールバージョンをダウンロードすることです。 ...
0. 準備: • iTunesを閉じる• タスクマネージャーでiTunesから始まるサービスを終了し...
この記事では、最も単純なビデオ連射機能をシミュレートするデモを作成します。アイデア:再生する動画と同...
目次forループwhileループdo-while ループループのネストトラバーサルメソッド~のために...