Webpack Dev Server 4代理问题与多条路线

Question

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

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

当我转到 localhost:3333 (WPDS) -> 它代理所有到 localhost:2222 （分形)

我遇到的问题是，我也需要代理各种 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

/玩家检查失败
/绘制检查成功！

请求 url /images/item.png

/玩家检查失败
/绘图检查失败
/ 检查成功！

Webpack Dev Server 4代理问题与多条路线

Webpack Dev Server 4 Proxy problem with multiple routes

webpack

proxy

webpack-4