解决axios请求cookie无法携带问题

最新推荐文章于 2024-05-03 18:05:43 发布
最新推荐文章于 2024-05-03 18:05:43 发布
阅读量2.7k 收藏 2
点赞数 1
文章标签： cookie vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cousin__/article/details/106364265
版权

在写代码时遇到了cookie无法传递导致axios请求无法请求到我的数据

然后找到了解决这个cookie的问题：

js-cookie：   https://www.npmjs.com/package/js-cookie  可以访问这个链接

通过下载  npm install js-cookie --save  先下载下来

然后在组件内引入   

 import cookies from 'js-cookies'

然后通过set来设置我们的cookie

Cookies.set('name', 'value', { expires: 7 });

然后通过get来获取我们的cookie 

Cookies.get('name'); // => 'value' 

这时我们访问后台的cookies就可以看到我们存储的cookie了 

 

最后需要在axios请求拦截中设置header头

config.headers['名子']=cookies.get('获取的cookie值 ')

 

这样问题就解决了！！

浮裕的小鱼干
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue axios 跨域请求无法带上cookie的解决
10-14
主要介绍了Vue axios 跨域请求无法带上cookie的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Axios跨域请求携带cookie
qq_43750656的博客
06-06 2398
如当前访问的域是10.99.160.11 ：8080 这个端口，那么当向10.99.160.11 ：8080 这个端口发请求时，由于不存在跨域，则可以顺利携带cookie，但是当向 10.99.160.11 ：9100这个端口发请求时，此时发生了跨域,当发生跨域请求时，默认是不能携带cookie的，此时需要设置axios的withCredentials ：配置项。但是使用axios发起跨域请求时，需要设置withCredentials:true 配置属性才能生效。
axios 前端访问后端携带cookie
最新发布
m0_73612839的博客
05-03 693
axios前端访问后端携带cookie
axios 请求自动携带 cookie
AaronZZH 的博客
05-14 8468
axios 请求自动携带 cookie axios默认是不让ajax请求头部携带cookie的，添加withCredentials设置 const instance = axios.create({ baseURL: "http://127.0.0.1:3000", withCredentials: true, //主要是添加这一行 }) 成功登录后 cookie无法 自动保存到问题 登录成功响应中有 Set-Cookie 但没有保存到浏览器cookie 前后端url不一致导致
使用 axios 设置请求带上cookie
weixin_39991767的博客
03-26 1188
【代码】使用 axios 设置请求带上cookie。
axios库读不到cookie_axios客户端无法存储cookie
weixin_39631689的博客
12-19 831
背景最近在用vue重构公司公司AngularJS 1.X项目，老项目身份认证采用的cookie，前端ajax库采用是angularJS的$http/$resource服务，新版采用的是axios，但是发现前端http响应头中少了Set-Cookie属性，同时在浏览器中查询不到cookie信息。postman请求正常，使用axios请求不正常，如下图所示：axios:postman:原因：1、为什么...
axios携带cookie配置详解(axios+koa)
10-17
主要介绍了axios携带cookie配置详解(axios+koa)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
今天小编就为大家分享一篇vue项目使用axios发送请求让ajax请求头部携带cookie的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
axios/fetch/ajax面试应用宝典-跨域请求携带cookie
m0_46176711的博客
08-30 812
一篇文章，带你了解axios/fetch/ajax兄弟3人的差异，以及跨域请求携带cookie的案列分享
亲测可用：Axios携带自定义的Cookie解决方案
ChuanyangChen的博客
07-28 1万+
做项目时遇到一个需求，后端需要在接口请求时，对用户登陆状态进行判断，需要在请求时携带Cookie。
axios+vue 请求时如何携带cookie
web13985085406的博客
08-01 6746
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。此时，请设置具体配置，这是一个坑，查阅资料得知，部分浏览器对*的兼容性不好，有的说法解释说Access-Control-Allow-Credentials’‘true’该字段会影响*的解析，导致报错。也就是说，不管后端是什么语言，需要返回以上四个响应头字段，如下所示，跨域状态下，cookie已经传递成功。如有不妥，请指出，希望对各位有所帮助，共勉!在响应头中添加以下几个字段。...
axios跨域请求设置并携带Cookies
热门推荐
weixin_39515823的博客
11-06 1万+
when the request’s credentials mode is ‘include’.」时说当请求是携带凭据模式（即Access-Control-Allow-Credentials: true、携带Cookie）时，Response的header “Access-Control-Allow-Origin” 的值不能是“但是，接下来在域名oauth.szile.com域名下请求接口时，请求没有携带设置的Cookie，这是问什么？查看Application下Cookie，确实是没有设置成功。
axios进行ajax请求得不到数据，cookie无法携带问题
qq_40752643的博客
11-04 4276
这个坑也是很早之前踩过，今天做项目的时候居然忘了，怎么都拿不到数据，果然好记性不如烂笔头，决定写篇博客来祭奠下我的猪脑子：         原因可能就是你发送请求的时候，需要设置cookie，然而你的cookie并没有发送到后端，这种情况要在配参数的时候设置一下withCredentials这个属性，这个属性值默认是false的，当你设置为true的时候，才可以将cookie发送到后端去，代码如...
vue_axios请求后台接口cookie无法传值
weixin_30247307的博客
03-07 1299
2018年3月7日： 当我们使用http向后台发送请求的时候，需要通过cookie把一些密匙传递给后台做判断授权登陆，当然前提是后台会先把cookie保持到本地。 使用vue开发的时候，会出现这个问题，具体是什么原因暂时还没了解清楚，这里记录一下解决方案，作后期参考。 1 mounted(){ const self = this; axios.defaults.headers.comm...
vue项目如何使用axios封装request请求以及Cookies的使用
qq_44962364的博客
08-04 5720
在Vue项目使用axios封装request请求、Cookies的使用以及aip的使用。
axios Refused to set unsafe header has been blocked by CORS policy
未金涛的博客
11-23 6581
前言 事情是这样的，我准备复制一个资源下载类的网站。第一步肯定是爬取目标网站的资源了。我在用python写爬虫的时候，当我提取完网页中的基础数据之后。就发现，目标网站后面大部分的数据都是通过有规律的aip返回的json数据源。这个时候作为一个白飘党，我就在想能不能直接白嫖对面的api，直接拿来用呢？然后，在前端遇到了些问题，我感觉以我现在的技术水准无法解决。 前端axios请求示例 axios({ method: "post", // url: "https://msdn
前端访问接口 自动携带Cookie (axios)
weixin_42414313的博客
02-06 1782
在跨域请求中，浏览器默认情况下不会自动携带跨域请求的 cookie。这是由于浏览器的同源策略（Same-Origin Policy）所导致的安全性限制。然而，可以通过设置一些选项来允许浏览器发送跨域请求时携带 cookie。将告诉浏览器在跨域请求中携带 cookie。但请注意，服务器也需要配置以允许跨域请求携带 cookie。在 Axios 中，你可以通过在请求配置中设置。来实现自动携带 cookie。
axios请求携带cookie
02-24
在使用axios发送请求时，可以通过设置`withCredentials`属性来携带cookie。`withCredentials`是一个布尔值，设置为`true`表示允许跨域请求携带cookie，设置为`false`表示不允许。 下面是一个使用axios发送请求携带cookie的示例代码： ```javascript import axios from 'axios'; axios.get('https://api.example.com/data', { withCredentials: true }) .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }); ``` 在上面的代码中，通过将`withCredentials`设置为`true`，axios会在发送请求时自动携带当前域下的cookie信息。这样服务器就可以获取到请求中的cookie信息。 需要注意的是，如果请求的目标域与当前域不同，且服务器没有设置允许跨域请求携带cookie的话，那么即使在axios中设置了`withCredentials: true`，也无法成功携带cookie。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值