如今前端开发使用 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',
},
},
这样,就能够在开发环境里代理使用线上的测试和生产环境了。
发表回复