axios+vue请求时携带cookie的方法实例

 更新时间:2022年09月20日 10:07:51   作者:zhouang770377  
做项目时遇到一个需求,后端需要在接口请求时,对用户登陆状态进行判断,需要在请求时携带Cookie,下面这篇文章主要给大家介绍了关于axios+vue请求时携带cookie的相关资料,需要的朋友可以参考下

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的一些尝试。

总结

到此这篇关于axios+vue请求时携带cookie的文章就介绍到这了,更多相关axios vue请求携带cookie内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue如何实现二进制流文件导出excel

    vue如何实现二进制流文件导出excel

    这篇文章主要介绍了vue如何实现二进制流文件导出excel,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 解析vue路由异步组件和懒加载案例

    解析vue路由异步组件和懒加载案例

    这篇文章主要介绍了解析vue路由异步组件和懒加载案例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 浅谈vue的props,data,computed变化对组件更新的影响

    浅谈vue的props,data,computed变化对组件更新的影响

    本篇文章主要介绍了浅谈vue的props,data,computed变化对组件更新的影响,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Element Steps步骤条的使用方法

    Element Steps步骤条的使用方法

    这篇文章主要介绍了Element Steps步骤条的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 如何在Vue和Spring boot之间实现前后端连接

    如何在Vue和Spring boot之间实现前后端连接

    最近搭建一个Springboot+vue前后端分离项目,真的很简单,下面这篇文章主要给大家介绍了关于如何在Vue和Spring boot之间实现前后端连接的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vue中插值表达式使用的示例详解

    vue中插值表达式使用的示例详解

    Vue的插值表达式是一种特殊的语法,用于在模板中动态地将数据绑定到视图中,一般使用双大括号 ("{{ }}")将表达式包裹起来,下面我们就来根据三个案例来深入了解下插值表达式的使用吧
    2023-11-11
  • Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息)

    Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息)

    这篇文章主要介绍了Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • Vue中key为index和id的区别示例详解

    Vue中key为index和id的区别示例详解

    这篇文章主要介绍了Vue中key为index和id的区别详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • 使用vue完成微信公众号网页小记(推荐)

    使用vue完成微信公众号网页小记(推荐)

    公司最近有一个H5页面的功能,比较简单的一个调查表功能,嵌套在我们微信公众号里面。这篇文章主要介绍了使用vue完成微信公众号网页小记,需要的朋友可以参考下
    2019-04-04
  • vue动态修改页面title的两种方法

    vue动态修改页面title的两种方法

    本文主要介绍了vue动态修改页面title的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06

最新评论