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

最新推荐文章于 2024-06-29 16:33:33 发布
最新推荐文章于 2024-06-29 16:33:33 发布
阅读量1.7k 收藏 11
点赞数 1
文章标签： cookie vue chrome devtools
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40825921/article/details/119181219
版权
在使用vue项目进行本地登录请求时，遇到验证码失效问题，经排查发现是axios携带cookies的问题。设置axios的withCredentials为true后，发现Chrome浏览器并未显示携带cookies。研究发现，Chrome 80及以上版本由于SameSite策略改变导致跨域请求不携带cookies。解决办法是在Chrome浏览器的flags中禁用SameSite限制。
摘要由CSDN通过智能技术生成

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

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

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

最低0.47元/天 解锁文章
冬天我不穿棉袄
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
解决 axios 请求时不携带 cookie
缚己
03-04 3623
问题描述 最近在做一个项目，开发模式是前后端分离的，用户登录之后服务端返回 cookie 信息，通过 document.cookie 设置 cookie 了，但是发起其他请求时请求头没有cookie ？？？ 截图： 解决方案 想到了之前 vue 电商项目中，手动设置了 Authorization ，今天可以 ctrl c+v 了 axios.interceptors.request.use(config => { config.headers.cookie = document.cookie
axios-mocker:内置的Chrome扩展支持，是模拟axios请求的最便捷工具
04-25
轴距模拟器 内置的Chrome扩展支持，是模拟axios请求的最方便的工具。 目录 资料共享 示例页面 包裹 测试 嘲笑者 执照 为什么需要模拟请求 无需等待依赖的Web服务进行开发和部署，您只需定义接口字段即可进行前端和后端的并行开发。 某些Web服务可能会污染生产环境中的数据，而不会通过模拟请求并指定所需的响应来发送实际请求。 很多时候，Web服务可能返回各种类型的响应，并且开发人员和测试人员需要验证它在不同的返回值下是否正常工作，例如，当Web服务状态代码为500时，可以按预期显示该页面。 通过正常操作创建数据有时会特别麻烦或困难，而使用模拟请求很方便，并且如果您想返回想要的内容，可以高效地进行边界测试。 它是TDD（测试驱动的开发）和自动化测试的基础。 快速开始 axios-mocker支持两种用法，两种模式的安装和使用可能会有所不同。 模式一（推荐） 这是使用axi
axios库读不到cookie_axios请求无法携带cookie
weixin_39759182的博客
12-19 552
背景最近在用vue重构公司公司AngularJS 1.X项目，老项目身份认证采用的cookie，前端ajax库采用是angularJS的$http/$resource服务，新版采用的是axios，但是发现前端http响应头中少了Set-Cookie属性，同时在浏览器中查询不到cookie信息,服务端也接收不到cookie信息。postman请求正常，使用axios请求不正常，如下图所示：axios...
axios发送请求，后端无法获取cookie
最新发布
qq_68937887的博客
06-29 547
主要的问题就是使用了localhost，而不是127.0.0.1，导致一直获取不到。在新建的user.controller.ts中。axios默认不携带cookie。2.后端nestjs。
Chrome调试时跨站不能设置cookie问题
Mr_TianChen的博客
08-12 3673
一直使用IIS配置开发前端页面，连接的后台服务，今天开机打开登录发现登陆不成功， 查看请求时发现登陆请求设置的set-cookie path后还跟这一个感叹号， 登陆成功调用其它接口时发现请求没有cookie了， 然后就一通查询啊，发现CHROME 80版本以后，SAMESITE COOKIE验证跨站问题， this set-cookie didn't specify a "SameSite" attribute，然后变成默认Lax。 为了调试的时候会方便点。找了一下怎么关闭chrome的这个选项
非同源域名axios无法携带cookie，基于问题我们深挖axios
JIANYMN的博客
03-21 3164
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
使用axios请求时,发送formData请求的示例
10-16
本篇文章将详细讲解如何使用`axios`来发送`FormData`请求。 `FormData`是一种特殊的JavaScript对象，它允许我们构建键值对，以模拟HTML表单提交的数据格式。这对于上传文件或发送包含多个部分的数据尤其有用。下面...
解决axios会发送两次请求,有个OPTIONS请求的问题
10-17
通过上述方法，开发者可以确保在发送axios请求时，浏览器不会自动发送OPTIONS预请求，从而避免了发送两次请求的问题。同时，应注意在使用qs或其他库进行数据序列化时，确保传递给服务器的数据格式与服务器端接口所...
判断当前浏览器不支持或Cookie已被禁用呢？可以使用以下js代码：
JHON_03的博客
08-12 1881
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 2548
90版本以上的谷歌浏览器，本地请求不携带cookie 1.发现问题 本地用谷歌浏览器跑localhost代码在登录页面去登录，接口一直报请求超时（之前没有问题），经查看前端在发请求的时候没有携带cookie（如下图） 2.产生问题原因 经过测试，谷歌浏览器线上代码没问题√，谷歌浏览器跑本地代码localhost有问题×，火狐浏览器线上代码没问题√，火狐浏览器跑本地代码localhost没有问题√； 原因是：Chrome禁用第三方Cookies的计划，在91版本后谷歌浏览器把same-site-by-def
Google Chrome浏览器不能携带cookie导致RTSP协议视频平台EasyNVR调取接口报错，如何解决？
EasyNVR官方技术博客
09-23 430
作为基于H5网页无插件直播的互联网直播平台，TSINGSEE青犀视频的权限产品都是基于H5播放，所以对浏览器的兼容性要求比较高。最近，谷歌最新版本更新之后，我们突然发现post请求就无法携带cookie了，到度娘上一搜索，发现很多用户都因为该问题导致了程序报错，花费了不少时间在排查上面。同样我们也因为该问题，导致用户调用EasyNVR的接口报错。 观察这两个请求，发现是在请求头里面一个有cookie，一个没有cookie；有cookie的请求成功了，没有cookie的请求失败了。 因为程序没有改
解决axios无法自动携带cookie的问题（包括谷歌浏览器）
m0_46627730的博客
05-21 4034
前言： 一直都在用session来进行身份验证，突然用cookie来进行身份验证，竟然发觉身份验证竟然失败了。 原因： 1. axios 默认不自动携带 cookie 2. 谷歌浏览器对 Cookie 的SameSite属性用来限制第三方 Cookie，从而减少安全风险。 解决： 1. 设置 axios.defaults.withCredentials = true 让 axios 请求自动携带 cookie 2. 谷歌浏览器访问 chrome://flags ，将 SameSite by default
Chrome浏览器跨域请求无法携带Cookie
m0_63588797的博客
03-09 1256
近期遇到一个问题，用Chrome浏览器在本地调试前端项目，跨域请求一直无法获取当前用户的登录态，接口返回用户未登录。通过排查发现无法携带Cookie进行请求，之后用其他浏览器尝试是可以成功的。这就表示问题出在我的Chrome浏览器上。猜测是和我的Chrome浏览器版本有关系。 解决方案 进入Chrome://flags/#same-site-by-default-cookies之后，把SameSite by default cookies设置为Disabled重启浏览器再运行项目即可。 当然还有其他方
chrome 浏览器(＞=80)下 axios 不携带 Cookie 的解决方案
m0_37566921的博客
12-25 717
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 710
chrome 浏览器cookie问题
Chrome浏览器无法保存cookie问题解决
夕降巫咸的博客
07-20 3462
之前使用vue启动本地项目联调时，其他小伙伴访问我本地链接由于chrome不保存cookie导致调试无法进行，所以记录下解决方案。 第一步：在chrome地址栏输入 chrome://flags/ 第二步：搜索 same-site 第三步：将前两项禁用，关闭浏览器重新打开，问题解决。 ...
axios发送请求携带cookie
06-02
可以通过设置`withCredentials`为`true`来让 Axios 发送请求时携带 cookie。具体实现如下： ``` axios.get(url, { withCredentials: true }).then(response => { // 处理响应结果 }).catch(error => { // 处理错误 }); ``` 在发送请求时，要确保服务器已经设置了正确的 CORS 头信息，允许客户端携带 cookie。如果服务器返回的响应中包含了`Set-Cookie`头信息，那么客户端会自动将 cookie 存储在浏览器中，以便后续的请求可以自动携带这些 cookie。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值