Webpack 多个代理不工作 - 出现 404 错误

Question

我正在尝试在我的项目中设置多个代理。我在本地有两个项目。在其中一个中，我需要从这两个项目的两个远程后端获取数据。我已经像这样设置了 webpack 文件：

var options = {
  contentBase: "src/client",
  proxy: {
    "fpHandling/api/**": {
      target: "http://localhost:8030",
      secure: false,
    },
    "fpCase/api/**": {
        target: "http://localhost:8080",
        secure: false,
    },
  },
  publicPath: config.output.publicPath,
  hot: true,
  noInfo: true,
  historyApiFallback: false,
  stats: {
    colors: true,
  },
};

var wds = new WebpackDevServer(webpack(config), options);

wds.listen(9999, 'localhost', function(err) {
  if (err) {
      return console.log(err); //NOSONAR
  }

  console.log('Listening at http://localhost:9999/');
});

但是，我无法从远程后端 fpCase/api/ 获取数据，出现 404 错误。但是，同一个端点在另一个项目中工作，我只有一个这样设置的代理：

proxy: {
    "**/api/**": {
      target: "http://localhost:8080",
      secure: false,
    },
  },
var wds = new WebpackDevServer(webpack(config), options);

wds.listen(9000, 'localhost', function(err) {
  if (err) {
      return console.log(err); 
  }

  console.log('Listening at http://localhost:9000/');
});

在控制台中我可以看到请求被发送到

的端口

Request URL: http://localhost:9999/fpCase/api/

我猜问题出在端口上，因为项目运行所在服务器的端口是 9999 而目标的端口是 8080。在另一个可以到达此端点的项目中，端口设置为 9000 并且可以正常工作。我做错了什么，我应该如何设置多个代理以便我可以从两个后端获取数据？

Answer 1

如果我对您的问题的理解正确，那么解决方案应该是 "rewrite requests" 通过在每个代理的基础上使用 pathRewrite 参数来访问您的代理。

因此，例如，如果您的应用向 /fpHandling/api/* 处的路线发出请求，那么您希望将该请求中继到 http://localhost:9999/* 的等价物。

为此，您可以像这样更新您的选项配置：

var options = {
  contentBase: "src/client",
   proxy: {

       "/fpHandling/api/*": {
           target: "http://localhost:9999",
           secure: false,
           pathRewrite: { '^/fpHandling/api': '' }
       },

       "/fpHandling/spark/*": {
           target: "http://localhost:9999",
           secure: false,
           pathRewrite: { '^/fpHandling/spark': '' }
        },

        "/fpCase/api/*": {
           target: "http://localhost:8888",
           secure: false,
           pathRewrite: { '^/fpCase/api': '' }
        }
  },
  publicPath: config.output.publicPath,
  hot: true,
  noInfo: true,
  historyApiFallback: false,
  stats: {
    colors: true,
  },
};

希望对您有所帮助！

Webpack 多个代理不工作 - 出现 404 错误

Webpack multiple proxies not working - getting 404 error

webpack-dev-server