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通常意味着该端点没有服务器。