Vue.js devServer.proxy 的问题

Question

因此，在我目前正在处理的应用程序中，我正在尝试将来自 Vue 前端的请求代理到 Express 服务器。 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

您应该始终使用带有前导斜杠的网址，例如/api/base/verified 见question。所以我猜在你的情况下，2个组件可能会在不同的路径中使用。

不同环境下不同的原因是 proxy 仅在开发服务器中工作，这就是他们称为 devServer 的原因。

我不确定您为什么会收到该错误，似乎必须有另一个配置可以转到端口 5000，例如 nginx 中的代理，但 ERR_CONNECTION_REFUSED 通常意味着该端点没有服务器。