axios+vue 请求时如何携带cookie

news2025/1/20 22:41:38

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的一些尝试。 如有不妥,请指出,希望对各位有所帮助,共勉!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408680.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Node.js安装,npm安装yarn步骤

第一步,首先安装npm npm是node.js下的包管理器,node.js的下载网址 Node.js 1.下载安装包后一路无脑点击next最后点击finish即可,安装完成之后打开文件夹就是以下目录。 2.在cmd窗口输入node -v、npm -v查看版本检查是否安装成功 一般完成以…

总结JS中常用的数组的方法大全

总结JS中常用的数组方法 JS中常用的数组方法总结 数组(Array)是一种复杂的数据类型,它属于Object(对象)类型,用来将一组数组合在一起,通过一个变量就可以访问一组数据。在使用数组时,经常会搭配循环语句使用,从而很方便…

Vue3+TS+Vite+Element Plus搭建后台管理系统

Vue3TSViteElement Plus搭建后台管理系统1、简介2、效果图3、技术栈4、项目目录5、setting.js(全局配置文件)6、路由router7、状态管理stores8、下载地址总结1、简介 该示例是vue3、typescript、vite、element plus搭建前端管理框架,主要模块分为:菜单、…

用 vite 构建 vue3 + TS 项目实战

目录 1、项目初始化 2、eslint 基础配置 3、配置 git commit hook 4、在开发和构建中进行代码规范校验 5、GitCommit规范 6、 Vite中的TS环境说明 7、Vue3 中 Ts 支持 8、Vue3中的script-setup语法 9、script-setup中的编译宏 10、配置转换JSX和TSX 11、初始化…

vue2计算属性computed

1.什么是计算属性 概念: 1.计算属性是vue的一个特性,此属性有计算能力,也就相当于一个函数。可以将计算结果缓存,作为一个属性使用。 特点: 1.要在 methods: { } 或者 computed: { } 中 ,以方…

基于SpringBoot的医疗管理系统(Java毕业设计)

【辰兮要努力】:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行! 博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端、后台、…

鲜花商城系统设计与实现(Java+Web+MySQL)

目 录 摘 要 I Abstract II 1 绪论 1 1.1 现状分析 1 1.2 研究意义 1 1.3 研究方法 1 2 系统的开发环境及技术简介 3 2.1 系统开发环境简介 3 2.2 系统开发技术简介 3 3 可行性研究 7 3.1 经济可行性 7 3.2 技术可行性 7 3.3 操作可行性 7 3.4 法律可行性 7 4 需求分析 9 4.1 …

vue+elementui中el-upload组件上传文件时,修改文件名,不用FormData

前言 今天在开发的时候,后端突然提了一个需求,因为特殊的文件上传不进文件服务器,所以后端问我能不能上传的时候给加个扩展名,本着只要逻辑没问题,都可以通过代码实现的理念,我说:“可以“”&a…

攻防世界WEB练习区(backup、cookie、disabled_button)

前言 作者简介:不知名白帽,网络安全学习者。 博客主页:https://blog.csdn.net/m0_63127854?typeblog 攻防世界专栏:https://blog.csdn.net/m0_63127854/category_11983747.html 网络安全交流社区:https://bbs.csdn.ne…

uniApp h5项目通过命令行打包,并生成指定路径、文件名称

需求:想要自动化部署uni项目,平常的uni项目是通过可视化构建,导致我们的自动部署成了半自动,非常不爽,于是就找到了下面这种方法 首先,用hb新建一个项目 然后,通过cli新建一个项目 文档 vue c…

禁止 input 自动填充

禁止 input 自动填充 在编写 Form 表单样式的时候,修改自动填充后的 input 样式是很麻烦甚至不可行的,而且还有一些不需要自动填充的场景。 浏览器根据保存数据时表单控件的 type 和 name 去匹配。 常用的就是 type 为 password,name 为 em…

Android 设置Padding和Margin(动态/静态)

一、什么是padding,什么是margin? 在Android界面开发时,为了布局更加合理好看,很多时候会用上Padding和Margin, padding和margin是什么呢?即内边距和外边距; 某个View指定为padding是针对该V…

vue制作一个好看的网页

1.安装并配置node.js (见本人博客-node.js) 2.建好的项目目录如下 build: 用来存放项目构建脚本 config: 存放项目的一些基本配置信息,最常用的就是端口转发 node_modules:这个目录存放项目的所有依赖,由npm install 下载来的文件 src:存放项目的源…

Vue设置浏览器小图标(ICON)

Vue设置浏览器小图标 当我们使用浏览器做开发时,我们能希望浏览器标签页能显示自己的logo小图标,这个是怎样设置的呢? 第一步:准备logo图片信息 找到自己的logo,通过图片在线转换格式,转换成32*32的ico为…

css关于文本溢出

处理思路 1)给需要做溢出处理的文本元素设置width或者max-width 2)超出部分省略 overflow:hidden 3) 文本溢出处理方式 text-overflow: ellipsis | clip | 自定义字符 如:“_” “.” 4) 设置文本不换行 white-space: nowrap 单行文本溢出 …

Rust开发WebAssembly在Html和Vue中的应用【后篇】

【建议先看】继上一篇【Rust开发WebAssembly在Html和Vue中的应用】遗留下来的问题 Rust开发WebAssembly在Html和Vue中的应用_一码超人的博客-CSDN博客 本文讲述Vue2与H5版uniapp如何引入rust webassembly的应用流程 在上一文中末尾,我说过vue2在引入胶水js后执行…

关于vue2与vue3

Vue组件之间通信方式有哪些 vue是组件化开发框架,所以对于vue应用来说组件间的数据通信非常重要。 1. 组件通信常用方式有以下8种: props $emit/$on $children/$parent $attrs/$listeners ref $root eventbus vuex 注意vue3中废弃的几个API 在vue3中废除$c…

前端实现tab栏切换,这么常见的案例你学会了吗?

📋 个人简介 💖 作者简介:大家好,我是阿牛,全栈领域新星创作者。😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍收藏⭐️留言&#x1f4d…

vue2 vue-router 不显示页面问题

目录 菜鸟入门,配置vue-router一直不显示。 排除过的问题点: 项目源码如下: 分析: 解决方案: 可能会遇到错误 这vue-router页面总算出来了: 菜鸟入门,配置vue-router一直不显示。 首先去…

el-cascader数据渲染及回显至页面(以及踩坑历程+解决)

第一次使用el-cascader就把坑踩了个遍,写个记录,也希望能够帮助到同为小猿的你们。 下面是我写的一个还原项目的例子 Bug1 首先是最小子集仍然有children,但是children为空数组,el-cascader渲染时,发现有children所…