近期用 webpack-dev-server 作代理的一些经验

如今前端开发使用 webpack-dev-server 作为本地服务器已经是基本配置，加上 proxy 功能可以很好的应对 SSL、跨域、线上环境切换等需求。Vue CLI 3 里也做了相应的集成，用起来很方便。

对于 Vue CLI 3 创建的项目，只要修改 vue.config.js，增加下面这段代码即可：

vue.config.js
devServer: {
  proxy: {
    '/api': {
      target: BASE_HTTP,
      changeOrigin: true,
      autoRewrite: true,
      secure: false,
    },
  },
},

关于其中参数的意义，大家可以参考 http-proxy-middleware 的文档，我就不多解释了。接下来，在身份认证存储 Cookie 方面，我厂后端使用了比较严格的模式：

Set-Cookie: XXID=xxid; Max-Age=2678400; Path=/; Secure; HttpOnly; SameSite=Strict

这样一来，因为域名和端口不同（本地开发是 localhost:8080），Cookie 写不进去，无法完成身份认证。虽然可以手工写入，但明显不是长久之计。经过一些搜索和尝试，最简单的做法是修改 HTTP header 中 set-cookie 的部分，不那么严格就可以：

vue.config.js
onProxyRes(proxyRes) {
  const key = 'set-cookie';
  if (proxyRes.headers[key]) {
    const cookies = proxyRes.headers[key].join('').split(' ');
    proxyRes.headers[key] = [cookies[0], 'Path=/'].join(' ');
    console.log(proxyRes.headers[key]);
  }
},

接下来，还要代理 WebSocket 请求。这里的问题在于生产环境里 WS 的路径也是 /api 开头的，所以直接写在后面会被提前匹配出来。所以我选择换 /socket 前缀，然后 rewrite ：

vue.config.js
'/socket': {
  target: BASE_WS,
  changeOrigin: true,
  ws: true,
  secure: false,
  pathRewrite: {
    '^/socket': '/api',
  },
},

这样，就能够在开发环境里代理使用线上的测试和生产环境了。