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月前
发送带cookie的请求
发送带cookie的请求
34 1
|
1月前
|
API
使用axios发送请求的格式是什么?示例代码
使用axios发送请求的格式是什么?示例代码
19 0
|
2月前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
25天前
|
前端开发 开发工具 数据安全/隐私保护
大事件项目13----axios请求拦截器,统一携带token
大事件项目13----axios请求拦截器,统一携带token
|
22天前
|
XML 前端开发 JavaScript
JavaEE:http请求 | 过滤器 | 同步与异步请求 | 跨域问题 | axios框架 有这一篇就够!
JavaEE:http请求 | 过滤器 | 同步与异步请求 | 跨域问题 | axios框架 有这一篇就够!
|
8天前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
|
18天前
|
NoSQL 前端开发 测试技术
若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
|
19天前
|
JSON 数据格式
axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
|
19天前
|
JavaScript
文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
|
19天前
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
18 0