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

如果我正确理解了您的问题，那么解决方案应该是通过按每个代理使用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错误

1 个答案: