vue-axios 发送请求,cookie带不上

简介: 首先配置是没问题的但是 chrome 请求cookie携带不上全局配置axios.defaults.withCredentials = true或者单个请求头配置withCredentials:true

问题


首先配置是没问题的但是 chrome 请求cookie携带不上

全局配置

axios.defaults.withCredentials = true

或者单个请求头配置

withCredentials:true


具体表现      


最近在玩vue-axios,发送验证码和登录请求的时候需要携带cookie信息,但是死活携带不上去(本人平常用的都是chrome浏览器),后来实验了下FireFox竟然可以,没理由我chrome不可以呀,遂深入了解了下


原因


发现是chrome是从51版本开始,Cookie 新增加了一个SameSite属性,用来防止 CSRF 攻击和用户追踪。

简单来说SameSite属性用来限制第三方 Cookie,从而减少安全风险

具体 SameSite 解释引用  阮一峰的一篇文章


解决方案


1. 换用其他浏览器例如FireFox

2.还用chrome ,地址栏 输入 chrome://flags/  

 搜索 samesite ,看到搜索结果 含有 SameSite 改为Disabled

ok,重启,测试搞定

P[~K$4G`N60S9)GH}4_GZ%X.png

3.修改架构不用跨域调用

上面两种方法都是应急使用的,都不符合应对场景的话,推到重来,不跨域

4.申请SSL证书

最好的解决方案就是申请一个ssl证书,以https的形式来调用,设置cookies头为Set-Cookie: token={token}; SameSite=None; Secure




目录
打赏
0
0
0
0
3
分享
相关文章
|
10月前
|
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
370 2
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
180 1
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
113 0
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
131 2
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
598 0
|
9月前
|
axios的get请求传入数组参数
【10月更文挑战第11天】 当使用 `axios` 发送包含数组参数的 GET 请求时,默认的序列化方式可能与后端(如 Django)不兼容,导致无法正确获取数组参数。解决方案是通过 `paramsSerializer` 指定自定义序列化函数,或使用 `qs` 库来格式化数组参数,确保前后端一致。示例代码展示了如何使用 `qs` 库设置 `arrayFormat` 为 `"repeat"`,以符合 Django 的解析要求。
329 2
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问