如何合并 webpack 开发服务器代理 url答案

【问题标题】：How to merge webpack dev server proxy urls如何合并 webpack 开发服务器代理 url
【发布时间】：2017-07-04 10:18:18
【问题描述】：

我需要为我的 webpack 开发服务器路径设置标头，但是正如您所看到的，对于这个配置，我必须为我要指定的每个 url 复制代理配置，有没有办法干燥这个配置？

  devServer: {
port: 3120,
host: "10.0.0.46",
publicPath: "http://10.0.0.46:3102/dist/js/",
hot: true,
compress: true,
contentBase: path.join(__dirname, "public"),
proxy: {
  "/customer/x": {
    target: "http://localhost:3100",
    secure: false,
    onProxyReq: function (proxyReq, req, res) {
      proxyReq.setHeader('X-Forwarded-User', 'user');
    }
  },
  "/cluster/**": {
      target: "http://localhost:3100",
      secure: false,
      onProxyReq: function (proxyReq, req, res) {
        proxyReq.setHeader('X-Forwarded-User', 'user');
      }
  },
  "/server/**": {
      target: "http://localhost:3100",
      secure: false,
      onProxyReq: function (proxyReq, req, res) {
        proxyReq.setHeader('X-Forwarded-User', 'user');
      }
  },
  "/data": {
      target: "http://localhost:3100",
      secure: false,
      onProxyReq: function (proxyReq, req, res) {
        proxyReq.setHeader('X-Forwarded-User', 'user');
      }
  },
  "/graph": {
      target: "http://localhost:3100",
      secure: false,
      onProxyReq: function (proxyReq, req, res) {
        proxyReq.setHeader('X-Forwarded-User', 'user');
      }
  }
}

}

如您所见，所有代理配置设置都是相同的，除了 url 部分。

我的版本是：

"webpack": "^2.2.1"
"webpack-dev-server": "^2.4.5"

【问题讨论】：

标签： webpack webpack-dev-server webpack-2

【解决方案1】：

如果您想将多个特定路径代理到同一个目标，您可以使用一个或多个具有上下文属性的对象的数组：

proxy: [{
  context: ["/auth", "/api"],
  target: "http://localhost:3000",
  secure: false,
  onProxyReq: function (proxyReq, req, res) {
    proxyReq.setHeader('X-Forwarded-User', 'user');
  }
}]

【讨论】：