前端跨域傳遞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大數據與數據倉庫