chrome浏览器发送axios请求无法携带cookies问题，踩坑记录

最新推荐文章于 2022-10-02 18:07:10 发布
原创 最新推荐文章于 2022-10-02 18:07:10 发布 · 1.9k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#cookie #vue #chrome devtools

在使用vue项目进行本地登录请求时，遇到验证码失效问题，经排查发现是axios携带cookies的问题。设置axios的withCredentials为true后，发现Chrome浏览器并未显示携带cookies。研究发现，Chrome 80及以上版本由于SameSite策略改变导致跨域请求不携带cookies。解决办法是在Chrome浏览器的flags中禁用SameSite限制。

最近在自习vue，在github上找了一个有前端和后端的项目，主要是有真实的数据请求。项目地址github.com/bailicangdu… ，但是项目是好几年前的，我是用的vue2.6，所以只能参考一下大佬的代码，然后配置那些都要自己慢慢琢磨了。 在本地进行登录请求的时候遇到了一些问题，在这里记录一下，也给其他网友一点参考意见，毕竟自己踩了两天，可能是基础知识有点薄弱，刚好也学习总结一下。我的chrome版本是版本 85.0.4183.121（正式版本） （64 位）

  1. 在进行登录请求的时候，一直提示我验证码失效

后来经过google各种搜索以及查看项目得issues，发现有人说是因为cookies问题

  1. 经过楼上朋友的提醒，又各种折腾，发现请求验证码的时候，服务端会发送一个cookies，里面携带了请求的验证，cap的值就是验证码的值

最低0.47元/天 解锁文章
解决axios会发送两次请求,有个OPTIONS请求的问题
10-17
通过上述方法，开发者可以确保在发送axios请求时，浏览器不会自动发送OPTIONS预请求，从而避免了发送两次请求的问题。同时，应注意在使用qs或其他库进行数据序列化时，确保传递给服务器的数据格式与服务器端接口所...
精选资源
axios-mocker:内置的Chrome扩展支持，是模拟axios请求的最便捷工具
04-25
内置的Chrome扩展支持，是模拟axios请求的最方便的工具。 目录 资料共享 示例页面 包裹 测试 嘲笑者 执照 为什么需要模拟请求 无需等待依赖的Web服务进行开发和部署，您只需定义接口字段即可进行前端和后端的并行...
axios库读不到cookie_axios请求无法携带cookie
weixin_39759182的博客
12-19 639
背景最近在用vue重构公司公司AngularJS 1.X项目，老项目身份认证采用的cookie，前端ajax库采用是angularJS的$http/$resource服务，新版采用的是axios，但是发现前端http响应头中少了Set-Cookie属性，同时在浏览器中查询不到cookie信息,服务端也接收不到cookie信息。postman请求正常，使用axios请求不正常，如下图所示：axios...
Chrome调试时跨站不能设置cookie问题
Mr_TianChen的博客
08-12 3838
一直使用IIS配置开发前端页面，连接的后台服务，今天开机打开登录发现登陆不成功， 查看请求时发现登陆请求设置的set-cookie path后还跟这一个感叹号， 登陆成功调用其它接口时发现请求没有cookie了， 然后就一通查询啊，发现CHROME 80版本以后，SAMESITE COOKIE验证跨站问题， this set-cookie didn't specify a "SameSite" attribute，然后变成默认Lax。 为了调试的时候会方便点。找了一下怎么关闭chrome的这个选项
关于本地调试不携带cookie
high32的博客
10-02 3330
最近做公司vue老项目，登录成功后又调取其他接口来获取个人信息，发现在线上运行正常，到了本地调试接口报401，跳转登录页面，登录页面判断已登录又去调个人信息的接口，接口报401又跳转登录页面，无限循环下去了…… 通过比较发现，这个获取个人信息的接口在本地调试时没有携带cookie，而在线上却携带了。 问了其他同事，说换火狐浏览器，还要是低版本的。之前就听说过这样的情况是浏览器机制的问题，谷歌和edge不行，只有火狐好使，我在想到底是什么机制 ，没听说过呢？这次遇到，是时候要清楚了。 说要低版本火狐是吧，首先
非同源域名axios无法携带cookie，基于问题我们深挖axios
JIANYMN的博客
03-21 3459
axios 无法携带cookie，原因竟然是withCredentials配置，重温ajax的创建步骤，并利用class类和promise特性去封装我么自己的axios
axios请求不携带Cookie的原因
热门推荐
风如也的博客
03-23 1万+
axios请求默认是不携带 Cookie 的，如果需要携带 Cookie 前端需要配置 withCredentials: true 即 // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 5000, // 请求超时时间 withCredentials: true }) 同时还要确保后端配置了 Access-Control-Allow-Credentia
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
本篇文章将详细解释如何在Vue项目中配置axios，使其在发送Ajax请求时自动携带cookie。 首先，axios在默认情况下不会自动将浏览器的cookie添加到请求头中。这是因为跨域请求（CORS）的安全策略限制，防止恶意网站...
使用axios请求时,发送formData请求的示例
10-16
本篇文章将详细讲解如何使用`axios`来发送`FormData`请求。 `FormData`是一种特殊的JavaScript对象，它允许我们构建键值对，以模拟HTML表单提交的数据格式。这对于上传文件或发送包含多个部分的数据尤其有用。下面...
判断当前浏览器不支持或Cookie已被禁用呢？可以使用以下js代码：
JHON_03的博客
08-12 1986
var dt = new Date();    dt.setSeconds(dt.getSeconds() + 60);    document.cookie = "cookietest=1; expires=" + dt.toGMTString();    var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1; 
90版本以上的谷歌浏览器，本地请求不携带cookie
TurtleOrange的博客
07-21 3049
90版本以上的谷歌浏览器，本地请求不携带cookie 1.发现问题 本地用谷歌浏览器跑localhost代码在登录页面去登录，接口一直报请求超时（之前没有问题），经查看前端在发请求的时候没有携带cookie（如下图） 2.产生问题原因 经过测试，谷歌浏览器线上代码没问题√，谷歌浏览器跑本地代码localhost有问题×，火狐浏览器线上代码没问题√，火狐浏览器跑本地代码localhost没有问题√； 原因是：Chrome禁用第三方Cookies的计划，在91版本后谷歌浏览器把same-site-by-def
Google Chrome浏览器不能携带cookie导致RTSP协议视频平台EasyNVR调取接口报错，如何解决？
EasyNVR官方技术博客
09-23 517
作为基于H5网页无插件直播的互联网直播平台，TSINGSEE青犀视频的权限产品都是基于H5播放，所以对浏览器的兼容性要求比较高。最近，谷歌最新版本更新之后，我们突然发现post请求就无法携带cookie了，到度娘上一搜索，发现很多用户都因为该问题导致了程序报错，花费了不少时间在排查上面。同样我们也因为该问题，导致用户调用EasyNVR的接口报错。 观察这两个请求，发现是在请求头里面一个有cookie，一个没有cookie；有cookie的请求成功了，没有cookie的请求失败了。 因为程序没有改
解决axios无法自动携带cookie的问题（包括谷歌浏览器）
m0_46627730的博客
05-21 4291
前言： 一直都在用session来进行身份验证，突然用cookie来进行身份验证，竟然发觉身份验证竟然失败了。 原因： 1. axios 默认不自动携带 cookie 2. 谷歌浏览器对 Cookie 的SameSite属性用来限制第三方 Cookie，从而减少安全风险。 解决： 1. 设置 axios.defaults.withCredentials = true 让 axios 请求自动携带 cookie 2. 谷歌浏览器访问 chrome://flags ，将 SameSite by default
chrome 浏览器(＞=80)下 axios 不携带 Cookie 的解决方案
m0_37566921的博客
12-25 822
chrome 浏览器(>=80)下 axios 不携带 Cookie的解决方案 首先线上环境 确实在setCookie的时候 通过设置 samesite: none 和 secure: true，并且运维侧配置https，解决这个问题 开发环境，因为没有https的支持，可以通过关闭 chrome 的 samesite 默认设置，来实现http下的正常开发，具体的设置如下： 1.打开chrome设置：chrome://flags/#same-site-by-default-cookies 2.将.
解决chrome浏览器高版本/98版本无法在本地手动添加cookie，刷新无法保留，cookie项报红的问题
LorenaLu的博客
02-14 882
chrome 浏览器cookie问题
Chrome浏览器无法保存cookie问题解决
夕降巫咸的博客
07-20 4680
之前使用vue启动本地项目联调时，其他小伙伴访问我本地链接由于chrome不保存cookie导致调试无法进行，所以记录下解决方案。 第一步：在chrome地址栏输入 chrome://flags/ 第二步：搜索 same-site 第三步：将前两项禁用，关闭浏览器重新打开，问题解决。 ...
axios关于cookie的问题
山海的博客
08-25 1万+
axios的访问请求默认是不带cookie的，因此想要带cookie的请求，需要设置一个参数：      withCredentials: true 可以在每次请求时设置这个参数，也可以全局设置    axios.defaults.withCredentials=true 一般这样设置就没有问题了，但是如果后台还是没有获取到cookie. 可以看下前端cookie的路径，跟当前请求的co...
解决chrome控制台查不到请求头的cookie
jsq6681993的博客
09-27 9135
原文链接：https://blog.youkuaiyun.com/qq_36838406/article/details/101943872 在做一个小项目的时候需要需要将token写如cookie中，然鹅，写完之后却没有在chrome浏览器的Response Headers中看到cookie，以为是代码写错，尝试其他的浏览器，发现可以查看到，于是断定是浏览器的某些设置问题。最终查到原来是Chrome67引入了一个新特性：site-isolation （站点隔离），也就是请求第三方站点数据时，如cookie等敏感信息会
axios 发起请求，基本用法
Rziziの博客
08-31 660
axios 发起请求 什么是 axios？ Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios 是一个专注于网络请求的库！ Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 Axios中文网： http://www.axios-js.com 使用 cdn: //先导入axios库文件才可使用 <script src="https://unpkg.com/axios/dist/axios
axios发送请求携带token
最新发布
10-11
如果你想在axios发送请求时携带token（通常用于身份验证），你可以这样做： 1. 首先，在你的应用程序中安装axios库，如果你还没有安装，可以使用npm或yarn命令： ```bash npm install axios # 或者 yarn add ...
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值