使用代理

webpack-dev-server 可以将一些请求代理到其他服务器。当你要将请求发送到同一域时,这可能对开发 API 客户端很有用。

代理通过 proxy 参数配置。

将服务器传递给/api 到其他服务侦听端口 8080 的 dev 服务器的配置示例可能如下所示

// webpack.config.js
module.exports = {
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080"
      }
    }
  }
...
}

改写

可以使用 pathRewrite 选项重写目标路径。

假设你要从上一个示例中删除/api 前缀,你的配置可能看起来像

// webpack.config.js
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        pathRewrite: {"^/api" : ""}
      }
    }
  }
...

请求/api/user/256 将转换为 http://localhost:8080/user/256

过滤

可以仅代理一些请求。bypass 允许你提供函数,返回值将确定是否应该代理请求。

假设你只想代理 POST 请求到/api 并让 webpack 处理其余部分你的配置可能看起来像这样

// webpack.config.js
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        bypass: function(req, res, proxyOptions) {
          if(req.method != 'POST') return false;
        }
      }
    }
  }
...