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

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

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

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

1. axios的Ajax請求

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

2. JQuery的Ajax請求

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

3. XMLHttpRequest的Ajax請求

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







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

微信公眾號：Java大數(shù)據(jù)與數(shù)據(jù)倉庫