axios.defaults.withCredentials = true 问题记录

584 阅读1分钟

最近做的移动端项目,其中有一个模块是 人员登记的功能,简称 '页面A'。出现了以下的问题,记录下。如有不正确的地方,还望指出。

进入 '页面A',有两种方式:

  • 方式1:用户通过账号密码登录,进入

image.png

  • 方式2:用户通过别人分享的二维码,进入

image.png

现在出现了如下的问题

客户反馈,通过以上‘方式1’进入页面,在不刷新页面的情况下,页面可以正常操作。 但是,只有进行了页面刷新,页面就会提示 “白名单”。

image.png

问题排查

在后端开发的协助下,后端指出是 因为 http 请求头 没有 携带 Cookie 信息。 axios.defaults.withCredentials 默认 为 false,即不会 携带 请求域下的 Cookie信息。

http请求头,正常携带了 cookie 的情况如下。

image.png

解决 通过设置 axios.defaults.withCredentials = true ,页面刷新的时候,没有提示'白名单',问题得到处理。

axios.defaults.withCredentials = true 的作用

当设置axios.defaults.withCredentials为true时,Axios会在发送请求时携带请求域的Cookie信息。这样可以实现跨域请求时携带Cookie,以便在服务器端进行验证和授权操作。这个功能在处理跨域请求时非常有用,但需要确保服务器端已经配置允许接收并处理跨域请求的Cookie。