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

Question

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

根据 http-proxy 文档，我应该可以使用 router 选项（而不是 target 属性，但 target 属性是 webpack-dev-server 所必需的）。这是我的代理配置的最小版本：

{
  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 选项中配置的端点。

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

Proxy router localhost

Proxy error: Could not proxy request /api/test from localhost:8080 to http://localhost:8000/.

See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

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

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

Answer 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。

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

Webpack dev server proxy router option doesn't work

webpack-dev-server

http-proxy-middleware

vue-cli