スキャフォールディングに基づいて Angular プロキシを構成する方法の簡単な分析

この記事では、Angular プロキシ (プロキシ) をスキャフォールディングに基づいて設定する方法を紹介します。

Angular プロキシ構成

• 公式 Web サイトのドキュメント https://angular.io/guide/build#using- company -proxy

[関連チュートリアルの推奨事項: "angular チュートリアル"]

なぜこれを行うのか?

ローカル開発におけるクロスドメインの問題を解決するには、他のアドレスに一致するリクエストをプロキシするプロキシ ファイルを書き込みます。

設定方法は?

• ルート ディレクトリに proxy.config.js を作成します
• このファイルで次の構成を行うことができます
• --proxy-config proxy.config.js

## を package.json

const PROXY_CONFIG = [
  {
    context: ['/api'],
    target: 'http://xxx',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      '^/api': '',
    },
  },
];
module.exports = PROXY_CONFIG;

# の実行中のプロジェクト コマンドに追加します

##context
• : 一致する必要があるパス
#target
• : プロキシされるアドレス
pathRewrite
• : 要求された部分のパスの書き換え。これはオブジェクトです。キーは ^ 書き換えられるパス 、値は置き換えられるパスです。 #secure
: セキュリティ設定
• changeOrigin
: 起点の変更
• #構成インスタンス

例: http://localhost:4208/auth/login

プロキシを

http://www .baidu.com/news/login

は次のように構成できます<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const PROXY_CONFIG = [ { context: [&amp;#39;/auth/login&amp;#39;], target: &amp;#39;http://www.baidu.com&amp;#39;, pathRewrite: { &amp;#39;^/auth/login&amp;#39;: &amp;#39;/news/login&amp;#39;, }, }, ] module.exports = PROXY_CONFIG;</pre><div class="contentsignin">ログイン後にコピー</div></div>

Q: インターフェイスが 2 つある場合、1 つは

/api/cer/register

、もう一方の

/api/cer/login、2 つのインターフェイスを異なるアドレスにプロキシするにはどうすればよいですか?

{
    context: ['/api/cer/login'],
    target: 'xxx1',
    secure: false,
    changeOrigin: true,
},
{
    context: ['/api'],
    target: 'xxx2',
    secure: false,
},

/api を使用します。これと一致する限り、プロキシを通過しますが、より正確な /api/cer を前に追加すると、そのうちの /login

が最初に一致し、このプロキシを使用します。 github でのその他の使用法の最新情報:

https://github.com/deepthan/blog-angular

プログラミング関連の知識の詳細については、こちらをご覧ください。 :

プログラミング入門

! ！

以上がスキャフォールディングに基づいて Angular プロキシを構成する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。