阅读 533

『前端BUG』—— 本地代理导致会话cookie中的数据丢失

「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

问题

在本地用代理请求服务端接口,解决跨域问题后,发生了一件极其诡异的事情,明明登录成功了,但是请求每个接口都返回未登录的报错信息。

原因

该套系统是采用会话cookie进行登录用户的身份认证,故查看每个请求的Request Headers中的cookie的值,发现原本如下图中的红框区域的SESSION不见了。

image.png

而明明登录接口的Response Headers中是存在set-cookie。

image.png

set-cookie会是把其值中的SESSION存储到浏览器的cookie中,存储成功后,每次请求服务端时,都会去浏览器中的cookie中读取SESSION,然后通过Request Headers中的cookie传递到服务端,完成身份认证。

另外set-cookie的值是服务端设置的,我们来认真观察一下set-cookie的值

SESSION=NjE1MTNmZWI1N2ExNDYyZGE4MWE0YmZjNjgwMmFmZGY=; Path=/api/operation/; HttpOnly; SameSite=Lax
复制代码

里面除SESSION,还有PathHttpOnlySameSite,而Path就是导致SESSION无法存储到客户端中的元凶,其中Path的值/api/operation/表示该cookie只有在用请求路径的前缀为/api/operation/才能使用。

回到代理配置中一看,

proxy: getProxy({
  '/dev': { 
    target: 'https://xxx.xxx.com',
    pathRewrite: { '^/dev': '/api' },
    secure: false,
    changeOrigin: true
  }
}),
复制代码

代理后,请求服务端的地址为xxx.xxx.com/dev/operati… ,其路径为 dev/operation/xxx,自然与/api/operation/不匹配,导致该cookie无法使用,自然无法将SESSION保存到浏览器的cookie中。

解决

找到原因了,问题很好解决,只要更改一下代理配置。

proxy: getProxy({
  '/api': { 
    target: 'https://xxx.xxx.com',
    pathRewrite: { '^/api': '/api' },
    secure: false,
    changeOrigin: true
  }
}),
复制代码

此外不要忘记更改 axios 的配置中的baseURL,将其改为/api/

文章分类
前端