具有多个路由的 Webpack Dev Server 4 代理问题

Question

我有一个包含许多页面和组件的fractal 设置。

当我启动 webpack-dev-server (WPDS) 时，它也会启动分形服务器。这个分形服务器在端口 2222 上运行。

当我去 localhost:3333 (WPDS) -> 它代理 everything 到 localhost:2222 (fractal)

我遇到的问题是我也需要代理各种 ajax 请求。例如/players/data?etc 需要代理到另一个主机，例如：https://www.external.com/players/data?etc

我研究了绕过选项，但 / 规则胜过其他一切。 欣赏建议。

webpack.config.js

const port = process.env.npm_package_config_port_fractal; //2222

const PROXY_TARGET = 'https://www.external.com';

...

proxy: {
  '/': {
    target: `http://localhost:${port}`, // 2222
  },
  // this will be an ajax request
  '/players/**': { . 
    secure: false,
    changeOrigin: true,
    target: PROXY_TARGET,
  },
  // this will be an ajax request
 '/draw/**': {
    secure: false,
    changeOrigin: true,
    target: PROXY_TARGET,
  },
}
...

Answer 1

您的配置几乎正确。
但是代理配置中的规则顺序很重要。 所以有了这个配置：

    devServer: {
        proxy: {
            '/players': {
                secure: false,
                changeOrigin: true,
                target: PROXY_TARGET,
            },
            '/draw': {
                secure: false,
                changeOrigin: true,
                target: PROXY_TARGET,
            },
            '/': {
                target: `http://localhost:${port}`, // 2222
            },
        }
    }

和 wds 报告： 所以它看起来很有效。
我没有看到 webpack-dev-server 的源代码，但我认为这些规则只是对每个请求的检查。 检查将寻找第一个匹配的正则表达式。

伪例子：

请求带有 url /draw/2

/玩家检查失败
/draw 检查成功！

请求带有 url /images/item.png

/玩家检查失败
/draw 检查失败
/检查成功！