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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue用axios发送post请求自动set cookie

    详解Vue用axios发送post请求自动set cookie

    vue-resource不再维护之后,我也用起了axios,但是死活无法设置服务器发送过来的cookie 后来查询文档发现,这个是要单独配置的. // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default 当我们把此配置项设置成默认配置项并且设置成true

  • Vue axios 跨域请求无法带上cookie的解决

    在main.js设置 // 携带cookie axios.defaults.withCredentials = true 补充知识:VUE axios请求跨域时没有带上cookie或者每次cookie都改变 这两天用VUE写管理后端时,碰到一个奇葩问题: 我本地使用dev配置开发的时候 请求可以带上cookie信息  打包出来部署在服务器上 请求就没带上cookie信息. 然后自己慢慢排查,联合后端同事,排查这个cookie问题,前端也配置了 axios.defaults.withCredent

  • vue项目使用axios发送请求让ajax请求头部携带cookie的方法

    最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知axios默认是不让ajax请求头部携带cookie的,因此,在main.js中设置如下: import axios from 'axios' axios.defaults.withCredentials=true;//让ajax携带cookie Vue.prototype.$axios = axios

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

    axios+vue 请求时如何携带cookie 1,当符合同源策略时,可以直接设置 document.cookie = " 你要设置的内容 " mounted() { document.cookie = "ioiopipoadiasdasdbasdbas"; // 非跨域传递cookie 直接设置cookie即可 this.getData(); //请求的方法 }, methods: { async getData() { let data = await axio

  • 详解javascript如何在跨域请求中携带cookie

    详解javascript如何在跨域请求中携带cookie

    目录 1.搭建环境 2.测试同源cookie 3.跨域请求携带cookie 4.总结 5.知识点 1. 搭建环境 1.生成工程文件 npm init 2.安装 express npm i express --save 3.新增app1.js,开启服务器1 端口:3001 const express = require('express') const app = express() const port = 3001 // 设置`cookie` app.get("/login", (r

  • android实现http中请求访问添加cookie的方法

    本文实例讲述了android实现http中请求访问添加cookie的方法.分享给大家供大家参考,具体如下: 第一种 HashMap<String, String> map = new HashMap<String, String>(); map.put("cookie","p1u_id=4eb591e73554db0f4d3300cb656113abfb968ef6b0ee2b5de0a35caa5217c51faa028b453576b35c&quo

  • ajax的get请求时缓存处理解决方法

    本文实例讲述了ajax的get请求时缓存处理解决方法.分享给大家供大家参考.具体分析如下: 很多时候在Ajax的get方法调用的时候由于缓存的原因无法及时获取正确的数据,这里就来分析一下解决这一问题的方法: 1. 在url后面添加一个随机数,如: 复制代码 代码如下: http://www.test.com?a=a&b=b&r=Math.random(); 2. 在url后面添加时间戳: 复制代码 代码如下: var t = new Date().getTime(); http://www

  • Vue中使用webpack别名的方法实例详解

    在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../common/stylus/variable" @import "../../common/stylus/mixin" 即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况. 而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径.那么

  • AJAX跨域请求数据的四种方法(实例讲解)

    由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP");  记住要进行兼容处理哦  在这里我就不写了 通过该对象进行获取 获取数据的四种状态  xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请

  • Vue中遍历数组的新方法实例详解

    1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ if(item.name.indexOf(keyword) != -1){ newList.push(item) } }) return newList } 2.filter item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组 search(key

  • Vue触发隐藏input file的方法实例详解

    1.使用input透明覆盖法 将input的z-index设置为1以上的数字并覆盖到需点击的内容上,将input的样式opacity设置为0(即为透明度为0),这样通过绑定在input上的change事件触发     ----推荐 <p class="uploadImg"> <input type="file" @change="picUpload($event)" accept="image/*" />

  • Angularjs之如何在跨域请求中传输Cookie的方法

    一般情况我们在使用WebApi之类的技术时,都会遇到跨域的问题,这个只需要在服务端做一下处理即可. 如果这些GET或POST请求不需要传递Cookie数据的话,就没什么问题了,但如果需要,那么会发现 虽然已经处理了跨域请求的问题,但后台始终无法获取到Cookie. 跨域传输Cookie是需要后台和前台同时做相关处理才能解决的. 就好比一个握手会话,前台先表示,我的跨域请求是带有Cookie的:请求到了服务端,服务端表示可以接收跨域Cookie,成交(开始重新带着Cookie发起请求) 后台代码

随机推荐