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

使用 webpack-dev-server 代理远程服务器;修改 http header 以便本地登录;代理 WebSocket。

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

对于 Vue CLI 3 创建的项目,只要修改 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 的部分,不那么严格就可以:

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

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

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

作者: meathill

爱编程,爱旅游,爱吐槽。 今年的目标是完成并运营至少一个 Side Project。 《Electron + Vue 实战开发》龟速创作中……

欢迎吐槽,请勿装死

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据