前端跨域傳遞Cookie設(shè)置

因?yàn)樽罱谑褂肰ue和SpringBoot結(jié)合開(kāi)發(fā)，異步請(qǐng)求使用axios這個(gè)插件，本身在后端已經(jīng)配置了跨域，前端指定了axios.defaults.baseURL，對(duì)于get請(qǐng)求是沒(méi)有問(wèn)題的，本來(lái)以為可以安心寫(xiě)頁(yè)面了，結(jié)果發(fā)現(xiàn)對(duì)于后端配置的需要驗(yàn)證authc才能訪問(wèn)的post頁(yè)面完全不能訪問(wèn)。查詢資料才知道，因?yàn)榍岸嗽L問(wèn)時(shí)候沒(méi)有把cookie放到請(qǐng)求頭里面，查閱了一下資料，這里記錄下。axios我的配置是這樣的：

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

登錄之后的請(qǐng)求會(huì)帶登錄用戶信息，需要把登錄時(shí)的cookie設(shè)置到之后的請(qǐng)求頭里面。而跨域請(qǐng)求要想帶上cookie，必須要請(qǐng)求屬性withCredentials=true，這是瀏覽器的同源策略導(dǎo)致的問(wèn)題：不允許JS訪問(wèn)跨域的Cookie。
withCredentials 屬性是一個(gè)Boolean類型，它指示了是否該使用類似cookies,authorization，headers(頭部授權(quán))或者TLS客戶端證書(shū)這一類資格證書(shū)來(lái)創(chuàng)建一個(gè)跨站點(diǎn)訪問(wèn)控制（cross-site Access-Control）請(qǐng)求。

1. axios的Ajax請(qǐng)求

//vue的main.js
axios.defaults.withCredentials = true;//允許跨域攜帶cookie信息
JavaScript

2. JQuery的Ajax請(qǐng)求

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

3. XMLHttpRequest的Ajax請(qǐng)求

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







作者：柯廣的網(wǎng)絡(luò)日志

微信公眾號(hào)：Java大數(shù)據(jù)與數(shù)據(jù)倉(cāng)庫(kù)