Webpack 开发服务器代理路由器选项不起作用答案

【问题标题】：Webpack dev server proxy router option doesn't workWebpack 开发服务器代理路由器选项不起作用
【发布时间】：2021-01-27 02:17:15
【问题描述】：

我正在使用 Vue CLI 设置应用程序。我已经开始配置webpack-dev-server 的代理以将请求代理到某个端点。根据某些请求参数，代理到哪个端点会有所不同。

根据http-proxy 文档，我应该能够使用router 选项来执行此操作（而不是target 属性，但webpack-dev-server 需要target 属性）。这是我的代理配置的最小版本：

{
  devServer: {
    port: 8080,
    host: 'localhost',
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        router: function (req) {
          console.log('Proxy router', req.hostname);
          return 'http://localhost:7000';
        },
      },
    },
  }
}

我希望在这里发生的情况是，对http://localhost:8080/api 的任何请求都将被代理到http://localhost:7000。实际发生的是，它尝试将请求代理到target 选项中配置的端点。

为了说明这一点，这是控制台输出：

代理路由器本地主机

代理错误：无法将请求 /api/test 从 localhost:8080 代理到 http://localhost:8000/。

请参阅https://nodejs.org/api/errors.html#errors_common_system_errors 了解更多信息（ECONNREFUSED）。

它执行路由器功能（如上面的控制台日志输出所示），但它似乎只是忽略了结果并代理到目标端点。根据http-proxy 文档，使用router 选项时不需要target 选项，所以如果可以的话我会删除它，但webpack-dev-server 本身需要设置target 选项并且是一个有效的 URI。

如何让代理使用webpack-dev-server中的路由器功能？

【问题讨论】：

我怀疑它正在工作，但如果请求失败（或者它回退到原始target，不确定），则反馈不正确。如果我在github.com/textbook/starter-kit/blob/master/client/webpack/… 中使用基本的"/api": { "target": "http://localhost:4321", "router": () => "http://localhost:3100" }，例如，当后端在 3100 上运行时它工作正常，但是当后端 down 时它报告代理 到 4321 失败.
谢谢，确实是这样。欢迎您将其发布为答案，我会将其标记为已接受。

标签： webpack-dev-server vue-cli http-proxy-middleware

【解决方案1】：

这似乎是底层http-proxy-middleware 的问题。尽管该配置确实成功地将请求代理到/api 到http://localhost:7000，但如果代理请求失败记录了原始target：

const target = (this.proxyOptions.target as any).host || this.proxyOptions.target;
const errorMessage =
  '[HPM] Error occurred while trying to proxy request %s from %s to %s (%s) (%s)';

Source

如果你调高日志级别，你可以看到它正在使用所需的目标：

'/api': {
  target: 'http://localhost:8000',
  router: function () {
    return 'http://localhost:7000';
  },
  logLevel: 'debug',
},

[HPM] Router new target: http://localhost:8000 -> "http://localhost:7000"
[HPM] GET /api => http://localhost:7000
[HPM] Error occurred while trying to proxy request /api from localhost:8080 to http://localhost:8000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

看起来这是fixed in v1.1.2。

【讨论】：