前端跨域傳遞Cookie設(shè)置
因?yàn)樽罱谑褂肰ue和SpringBoot結(jié)合開發(fā),異步請(qǐng)求使用axios這個(gè)插件,本身在后端已經(jīng)配置了跨域,前端指定了axios.defaults.baseURL
,對(duì)于get請(qǐng)求是沒有問題的,本來以為可以安心寫頁面了,結(jié)果發(fā)現(xiàn)對(duì)于后端配置的需要驗(yàn)證authc
才能訪問的post頁面完全不能訪問。查詢資料才知道,因?yàn)榍岸嗽L問時(shí)候沒有把cookie放到請(qǐng)求頭里面,查閱了一下資料,這里記錄下。axios
我的配置是這樣的:
登錄之后的請(qǐng)求會(huì)帶登錄用戶信息,需要把登錄時(shí)的cookie設(shè)置到之后的請(qǐng)求頭里面。而跨域請(qǐng)求要想帶上cookie,必須要請(qǐng)求屬性withCredentials=true
,這是瀏覽器的同源策略導(dǎo)致的問題:不允許JS訪問跨域的Cookie。
withCredentials
屬性是一個(gè)Boolean類型,它指示了是否該使用類似cookies,authorization,headers(頭部授權(quán))或者TLS客戶端證書這一類資格證書來創(chuàng)建一個(gè)跨站點(diǎn)訪問控制(cross-site
Access-Control)請(qǐng)求。
1. axios的Ajax請(qǐng)求
2. JQuery的Ajax請(qǐng)求
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ù)倉庫