webpack-dev-server proxyTable 配置实现跨站api代理访问

新H5应用项目欲实现前后端完全分离，脱离原来的后端框架，独立工程进行开发。Auth相关可以通过cookie共享解决，但接口访问就会涉及跨域，在尝试cors方案各种坑后，决定使用反向代理。至于代理方案，生产环境使用 nginx 可以轻松实现，但在开发阶段使用的是 webpack-dev-server，也需要支持代理访问接口。webpack官网文档并没有给出关于代理的详细配置，但其代理使用的是http-proxy-middleware，内部调用的是 http-proxy包予以实现代理。在 http-proxy-middleware 文档中有关于 proxyTable 的详细配置。对于一般场景来说，主要是以下两个配置：

  • changeOrigin
    设置为 true 可修改转发header中host值为 target 的URL，对于使用多虚拟主机配置的服务器可以访问对应 host，也就是目标代理服务器，如果你的目标服务器不存在多虚拟机的情况，并且后端应用逻辑无需校验指定请求的URL，也可以忽略不设置

  • pathRewrite
    重写请求url，保持与目标代理服务器的请求地址一致

    1
    2
    3
    4
    5
    6
    7
    '/api/*': {
      target: 'http://target.com/',
      changeOrigin: true,
      pathRewrite: {
        '^/api' : ''
      }
    }

经过rewrite后 /api/users/info ->/users/info，如果不rewrite，目标地址会加上 /api 前缀，不符合目标服务器的url请求规