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




相关文章
|
8天前
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
13 2
|
22天前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
28天前
|
前端开发 API
Axios请求成功和失败时分别执行哪个函数?
Axios请求成功和失败时分别执行哪个函数?
17 1
|
3月前
|
JSON 数据格式
使用axios发送get和post请求
使用axios发送get和post请求
32 0
|
3月前
|
资源调度 JavaScript 前端开发
vue封装请求
vue封装请求
16 0
|
7天前
|
存储 算法 JavaScript
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
今天这篇文章,主要是讲述对axios封装的请求,由于部分请求可能存在延时的情况。使得接口可能存在会被持续点击(即:接口未响应的时间内,被持续请求),导致重复请求的问题,容易降低前后端服务的性能!故提出给axios封装的配置里面,新增一个防抖函数,用来限制全局请求的防抖。
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
|
19天前
axios中的get带参数的请求方法
axios中的get带参数的请求方法
|
23天前
|
JavaScript 数据格式
Vue axios请求拦截和相应拦截
Vue axios请求拦截和相应拦截
14 2
|
2月前
04_装饰器封装axios_get请求
04_装饰器封装axios_get请求
30 0