vue.config.js での DevServer.proxy の設定手順と、設定が正しくても有効にならない問題

記事ディレクトリ

プロキシ構成の確認と分析

devServer: {
    
    
    https: true, // 开启https模式
    // 配置服务器代理
    proxy: {
    
    
      '/api': {
    
     // 匹配访问路径中含有 '/api' 的路径
        target: 'http://localhost:3000/', // 测试地址、目标地址
        changeOrigin: true,
        ws: true, // 是否开启 webSocket 代理
        pathRewrite: {
    
     // 请求路径重写
          '^/api': '',   //重写请求路径
        },
      }
    }
  },

原因一

Baidu の最も多くの説明
1. 構成が間違って書かれています (解決策: 上記の例をコピーして貼り付け、変更します)
2. パスが一致しません (解決策: この記事の詳細部分を参照してください)

理由 2

この理由に注意してください

この方法は開発環境用です. 第二に、リクエストは開発サーバーによって受信される必要があり、リクエストが一致しない場合、リクエストは構成された URL にプロキシされます。
コメントアウトするか、ローカルパスに変更してください。そうしないと、プロキシが有効になりません

たとえば、以前のグローバル http.js 構成ファイルは次のように記述されています。

const http = axios.create({
    
    
  baseURL: 'http://localhost:3000/',
})

そのため、環境に生产関係开发、リクエストは構成済みの baseURL に送信されます而不会走我们的代理！！！。

そのため、構成を変更して、本番パスが本番環境で有効になるようにする必要があります

let baseURL = "/";
if (process.env.NODE_ENV === 'production') {
    
    
  baseURL = 'http://localhost:3000/';
}

const http = axios.create({
    
    
  baseURL,
})

このようにして、開発環境でbaseURL = "/"プロキシが有効になります。

知らせ

もう 1 つのポイントは、プロキシが有効であっても、ブラウザのリクエストヘッダーに表示されるのは、構成されたプロキシアドレスではないということです。
そのため、テストするときは、バックエンドリクエストが過去に行われたことがあるかどうかについてさらに質問するか、自分で簡単なサーバーをセットアップして成功するかどうかを確認してください。
ブラウザのリクエストヘッダーアドレスだけを見つめないでください。

詳細な説明

リクエストパスには ID が必要です。! !

proxy: {
    
    
      '/api': {
    
     
      ...
      }
 }

プロキシを使用するには、まず、この接続にプロキシを使用することを示す識別子が必要です。
そうしないと、html css js などの静的リソースがプロキシに送られます。
/api は、インターフェイスが /api で始まる場合にのみプロキシを使用することをノードに伝えるためのものであるため、インターフェイスは /api/xx/xx として記述されます。
問題があります: リクエストパスが利用できません/api。使用しpathRewrite て解決してください

パス書き換え

pathRewrite: {
    
     // 请求路径重写
    '^/api': '',   //重写请求路径
 },

pathRewrite のキー値は正規表現^/apiです。
pathRewrite の値は、置き換えられたパスです。
ここでの言葉は、一致したアドレスを文字列として扱い、jsreplaceメソッドを。
- 例えば：
- お願いがありますaxios.get("/api/aa/bb/cc")。
- ここの構成によるとproxy、のリクエストパス/apiをプロキシする必要があり、/api/aa/bb/ccパスにが含まれている/apiため、リクエストをプロキシする必要があります。
- パスを文字列として実行し、"/api/aa/bb/cc".replace(/^\/api/, "")
- 以下の結果:/aa/bb/cc
- 最終的なリクエストパスは次のようになりますhttp://localhost:3000/aa/bb/cc 不含/api。

- axios.get("/ee/ff/dd")このリクエストは、事前設定されたルールに一致しないため、プロキシされません (リクエストパスは一致しません/api) 。
- 最終的なリクエストパスはhttp://localhost:3000/ee/ff/dd、元のパスと一致するようになります。

- 別の例は、私たちの構成が

pathRewrite: {
    
     // 请求路径重写
    '^/api': '/rewrite',   //重写请求路径
 }

次に、私たちの要求axios.get("/api/aa/bb/cc");
実行します"/api/aa/bb/cc".replace(/^\/api/, "/rewrite")。
最終的なリクエストパスは次のようになりますhttp:/rewrite/localhost:3000//aa/bb/cc。
/rewrite先頭をに置き換えます/api。

変更元

フロントエンドサーバーが http://localhost:3000 で、バックエンドサーバーが http://localhost:8082 であるとします。

次に、バックエンドは request.getHeader("Host") を通じて http://localhost:3000 を取得します。

changeOrigin: true を設定すると、バックエンドは request.getHeader(“Host”) を通じて http://localhost:8082 を取得します。プロキシサーバーは、この時点で要求されたターゲットアドレスに従ってホストを変更します。

いいね、ブックマーク、コイントス、かわいい彼女はもれません！