Vue.js devServer.proxy 的問題

Question

因此，在我目前正在處理的應用程序中，我嘗試將來自 Vue 前端的請求代理到 Express 服務器。 快速服務器在 localhost:5000 上運行。 這是在我的 vue.config.js 中：

    "devServer": {
    "proxy": {
      "^/api/": {
        "target": "http://localhost:5000",
        "ws": true,
        "changeOrigin": true
      }
    }
  },

我無法理解的是為什么在大多數情況下，僅使用api/routename向我的服務器發送請求就可以正常工作。 然后僅在 2 個組件中它不起作用。 在它起作用的組件中，GET 請求如下所示：

axios.get('api/base/verified')
.then...

然后在其他兩個組件中，根據僅請求api/route-name的相同原則，我收到錯誤。 在開發模式下，請求然后突然轉到 http://localhost:8080/api...，並且在嘗試部署時，他們轉到 5000，但我收到此錯誤消息：

xhr.js:184 GET http://localhost:5000/api/content/course/5f54f3c60bb7a30017c1abf2 net::ERR_CONNECTION_REFUSED

有沒有人知道交易是什么，以及為什么代理的行為如此不同，具體取決於環境和組件？

Answer 1

您應該始終使用帶有前導斜杠的 url，例如/api/base/verified請參閱此問題。 所以我猜在你的情況下，2 個組件可能在不同的路徑中使用。

不同環境不同的原因是proxy僅在開發服務器中工作，這就是他們稱為devServer的原因。

我不確定為什么會出現該錯誤，似乎必須有另一個配置可以轉到端口5000例如 nginx 中的代理，但ERR_CONNECTION_REFUSED通常意味着該端點沒有服務器。