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

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

问题

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

原因

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

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

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

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

SESSION=NjE1MTNmZWI1N2ExNDYyZGE4MWE0YmZjNjgwMmFmZGY=; Path=/api/operation/; HttpOnly; SameSite=Lax

里面除SESSION，还有Path、HttpOnly、SameSite，而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/。