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




相关文章
|
10天前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
42 2
|
26天前
|
JavaScript 前端开发 开发者
vue中使用axios请求post接口,请求会发送两次
vue中使用axios请求post接口,请求会发送两次
|
6天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
22 6
|
2月前
|
Python
axios的get请求传入数组参数
axios的get请求传入数组参数
|
9天前
axios全局做节流,解决多次点击导致多次请求接口
本文介绍了如何在Axios请求中实现全局节流,以防止用户快速多次点击导致重复发送相同请求的问题。
24 2
|
10天前
|
前端开发 JavaScript
React配合axios请求拦截校验session,403跳转至登陆页面
React中使用axios进行请求拦截,通过自定义事件监听和响应拦截实现403状态码时的自动登录页面跳转。
16 2
|
13天前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
18 4
|
2月前
|
JavaScript UED
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
|
2月前
|
移动开发 JavaScript 前端开发
"解锁axios GET请求新姿势!揭秘如何将数组参数华丽变身,让你的HTTP请求在云端翩翩起舞,挑战技术极限!"
【8月更文挑战第20天】二维码在移动应用中无处不在。本文详述了在UniApp H5项目中实现二维码生成与扫描的方法。通过对比插件`uni-app-qrcode`和库`qrcode-generator`生成二维码,以及使用插件和HTML5 API进行扫描,帮助开发者挑选最佳方案。无论是即插即用的插件还是灵活的JavaScript实现,都能满足不同需求。
29 0
|
4月前
|
前端开发 开发工具 数据安全/隐私保护
大事件项目13----axios请求拦截器,统一携带token
大事件项目13----axios请求拦截器,统一携带token
下一篇
无影云桌面