前端跨域传递Cookie设置

因为最近在使用Vue和SpringBoot结合开发，异步请求使用axios这个插件，本身在后端已经配置了跨域，前端指定了axios.defaults.baseURL，对于get请求是没有问题的，本来以为可以安心写页面了，结果发现对于后端配置的需要验证authc才能访问的post页面完全不能访问。查询资料才知道，因为前端访问时候没有把cookie放到请求头里面，查阅了一下资料，这里记录下。axios我的配置是这样的：

var axios = require('axios')
axios.defaults.baseURL = 'http://localhost'
axios.defaults.withCredentials = true

登录之后的请求会带登录用户信息，需要把登录时的cookie设置到之后的请求头里面。而跨域请求要想带上cookie，必须要请求属性withCredentials=true，这是浏览器的同源策略导致的问题：不允许JS访问跨域的Cookie。
withCredentials 属性是一个Boolean类型，它指示了是否该使用类似cookies,authorization，headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。

1. axios的Ajax请求

//vue的main.js
axios.defaults.withCredentials = true;//允许跨域携带cookie信息

2. JQuery的Ajax请求

$.ajax({
    type: "GET",
    url: url,
    xhrFields: {
        withCredentials: true // 允许跨域携带cookie信息
    },
    processData: false,
    success: function(data) {}
});

3. XMLHttpRequest的Ajax请求

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.withCredentials = true; // 允许跨域携带cookie信息
xhr.send();

作者：柯广的网络日志

微信公众号：Java大数据与数据仓库