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




相关文章
|
2月前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
146 2
|
1月前
|
资源调度 JavaScript
|
1月前
|
缓存 JavaScript 搜索推荐
|
14天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
38 2
|
1月前
|
存储 Java 程序员
【HTTP】请求“报头”,Referer 和 Cookie
【HTTP】请求“报头”,Referer 和 Cookie
35 1
【HTTP】请求“报头”,Referer 和 Cookie
|
2月前
|
JavaScript 前端开发 开发者
vue中使用axios请求post接口,请求会发送两次
vue中使用axios请求post接口,请求会发送两次
|
29天前
|
Python
axios的get请求传入数组参数
【10月更文挑战第11天】 当使用 `axios` 发送包含数组参数的 GET 请求时,默认的序列化方式可能与后端(如 Django)不兼容,导致无法正确获取数组参数。解决方案是通过 `paramsSerializer` 指定自定义序列化函数,或使用 `qs` 库来格式化数组参数,确保前后端一致。示例代码展示了如何使用 `qs` 库设置 `arrayFormat` 为 `"repeat"`,以符合 Django 的解析要求。
25 2
|
1月前
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
|
1月前
axios允许跨域cookie
axios允许跨域cookie
30 3