原文:https://blog.csdn.net/palerock/article/details/73456992
參考:https://www.cnblogs.com/gdufs/p/8442648.html
在前后端分離的項目中,ajax跨域請求怎樣附帶cookie
在項目的實際開發(fā)中,我們總會遇到前后端分離的項目,在這樣的項目中窖梁,跨域是第一個要解決的問題
除此之外诈泼,保存用戶信息也是很重要的
然而测柠,在后臺保存用戶信息通常使用的session和cookie結(jié)合的方法七嫌,
而在前端的實際情況中,跨域產(chǎn)生的ajax是無法攜帶cookie信息的扼鞋,這樣導(dǎo)致了session和cookie的用戶信息儲存模式受到影響,該怎樣去解決這樣一個問題呢
跨域了愤诱,不會帶上已有的 Cookie
解決方案
1.自己架個反向代理啥的把兩個搞到一個域名上云头。
2.前端設(shè)置withCredentials,后端設(shè)置Access-Control-Allow-Credentials淫半。
// 后端設(shè)置Access-Control-Allow-Credentials
// 解決跨越問題
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,SessionToken");
// 允許跨域請求中攜帶cookie
response.setHeader("Access-Control-Allow-Credentials", "true");
// 前端設(shè)置withCredentials
$.ajax({
type: "post",
url: xxx,
data: xxx,
contentType: 'application/json',
dataType: "json",
xhrFields: {
withCredentials: true
},
success: function (data) {
}
})
注意: 后臺解決跨域代碼的response.setHeader("Access-Control-Allow-Origin", "");這部分和設(shè)置跨域攜帶cookie部分產(chǎn)生了沖突溃槐,在查閱相關(guān)資料我發(fā)現(xiàn)設(shè)置跨域ajax請求攜帶cookie的情況下,必須指定Access-Control-Allow-Origin科吭,意思就是它的值不能為竿痰,設(shè)置為response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));