axios+vue 请求时如何携带cookie

最新推荐文章于 2025-06-30 16:51:05 发布

原创最新推荐文章于 2025-06-30 16:51:05 发布 · 7.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#android #前端 #后端

面试同时被 3 个专栏收录

125 篇文章

订阅专栏

阿里巴巴

120 篇文章

订阅专栏

学习路线

118 篇文章

订阅专栏

本文介绍了在axios+vue环境下，如何在跨域请求时携带cookie。当同源策略允许时，直接设置document.cookie即可。跨域时需在axios中设置withCredentials: true，并确保后端返回正确的响应头，如Access-Control-Allow-Origin、Access-Control-Allow-Credentials等。注意，Access-Control-Allow-Headers不应设为"*"，避免兼容性问题。作者分享了个人经验，希望能对读者有所帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios+vue 请求时如何携带cookie
1，当符合同源策略时，可以直接设置 document.cookie = " 你要设置的内容 "

mounted() {
    document.cookie = "ioiopipoadiasdasdbasdbas";   // 非跨域传递cookie 直接设置cookie即可
    this.getData();   //请求的方法
   
  },
  methods: {
    async getData() {
       let data = await axios.get('/data.json', {
         params: {
           id: 1,
         },
  
       }
    },
  },

在这里插入图片描述
此时：可以直接向服务端传递cookie，无需设置。
2，当出现跨域请求的时候
默认情况下：跨域请求不会携带cookie，所以要添加 withCredentials: true 配置
注意：这种情况下稍微复杂，但是对于前端而言，只需要写上 withCredentials: true 该配置即可
当然在此之前还有 document.cookie = “ioiopipoadiasdasdbasdbas”; 这行代码，你需要设置一个cookie，才可以传给服务端。

 document.cookie = “ioiopipoadiasdasdbasdbas”
 let data2 = await this.$axios.get("http://localhost:9000/select", {
        withCredentials: true,   //设置跨域的时候传递cookie，需要服务端的配合   
      });
      console.log(data2, "data2");

此时：一定需要后端的配合，不然浏览器会爆出一些错误，导致请求失败。
后端代码以node.js为例：
在响应头中添加以下几个字段

res.header('Access-Control-Allow-Credentials', 'true') //当客户端跨域并需要传递cookie时，需要设置Access-Control-Allow-Credentials，并且值为“true”  代表是否向页面暴露cookie
    // 指定允许的跨域请求字段。
res.header(
        'Access-Control-Allow-Headers',
        'token,Content-Type,Content-Length, Authorization, Accept,X-Requested-With,domain,zdy' //当客户端跨域并需要传递cookie时，需要设置Access-Control-Allow-Headers，并且值为不能为“*”，需要具体配置  代表允许上传的请求头字段
    )
    // 指定允许的跨域请求的来源。填写星号（*）表示全部域名；您也可以填写完整域名，例如http://www.aliyun.com。
res.header('Access-Control-Allow-Origin', 'http://localhost:8082') //当客户端跨域并需要传递cookie时，需要设置Access-Control-Allow-Origin，并且值为不能为“*”，需要具体配置
    // 指定允许的跨域请求方法。可同时设置多个方法，多个方法用英文逗号（,）分隔。
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')

也就是说，不管后端是什么语言，需要返回以上四个响应头字段，如下所示，跨域状态下，cookie已经传递成功
在这里插入图片描述

值得强调的是：Access-Control-Allow-Origin、Access-Control-Allow-Headers 两个字段一定不要设置为 “*” ，否则也会失败。 此时，请设置具体配置，这是一个坑，查阅资料得知，部分浏览器对 * 的兼容性不好，有的说法解释说 Access-Control-Allow-Credentials’：‘true’ 该字段会影响 * 的解析，导致报错。

以上就是我对 axios携带 cookie的一些尝试。如有不妥，请指出，希望对各位有所帮助，共勉!!!

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦