Webpack dev服务器代理

Webpack dev服务器利用http-proxy-middleware可选地将请求代理到单独的，可能是外部的后端服务器。示例配置如下。

proxy: {
  '/api': {
    target: 'https://other-server.example.com',
    secure: false
  }
}

// In webpack.config.js
{
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
}

// Multiple entry
proxy: [
  {
    context: ['/api-v1/**', '/api-v2/**'],
    target: 'https://other-server.example.com',
    secure: false
  }
]

有关可用配置，请参阅http-proxy-middleware选项文档。

代理一些URL可用于各种配置。一个例子是从本地开发服务器提供JavaScript文件和其他静态资源，但仍然向外部后端开发服务器发送API请求。另一个例子是在两个独立的后端服务器之间拆分请求，例如认证后端和应用程序后端。

绕过代理
（在v1.13.0中增加）代理可以根据函数的返回来选择性的绕过。该函数可以检查HTTP请求，响应和任何给定的代理选项。它必须返回一个false或者一个将被服务的URL路径，而不是继续代理请求。

例如，下面的配置不会代理源自浏览器的HTTP请求。这与historyApiFallback选项类似：浏览器请求将正常接收HTML文件，但API请求将代理到后端服务器。

proxy: {
  '/some/path': {
    target: 'https://other-server.example.com',
    secure: false,
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf('html') !== -1) {
        console.log('Skipping proxy for browser request.');
        return '/index.html';
      }
    }
  }
}

重写代理请求的URL
（在v1.15.0中增加）对代理的请求可以通过提供一个函数来选择性的重写。该功能可以检查和更改HTTP请求。

例如，下面的配置将重写HTTP请求以删除/apiURL开头的部分。

proxy: {
  '/api': {
    target: 'https://other-server.example.com',
    pathRewrite: {'^/api' : ''}
  }
}

请注意，这pathRewrite是来自http-proxy-middleware的一项功能，因此请查看他们的文档以获取更多配置。

代理本地虚拟主机
看起来，http-proxy-middleware预解析本地主机名localhost，你需要以下配置来修复代理请求：

var server = new webpackDevServer(compiler, {
  quiet: false,
  stats: { colors: true },
  proxy: {
    "/api": {
      "target": {
        "host": "action-js.dev",
        "protocol": 'http:',
        "port": 80
      },
      ignorePath: true,
      changeOrigin: true,
      secure: false
    }
  }
});
server.listen(8080);

Webpack dev服务器代理

评论 (0)