參考：https://www.cnblogs.com/nuccch/p/7875189.html
問題描述
前后端完全分離的項目日麸，前端使用Vue + axios衔瓮，后端使用SpringMVC庙洼，容器為Tomcat。
使用CORS協(xié)議解決跨域訪問數(shù)據(jù)限制的問題祝拯，但是發(fā)現(xiàn)客戶端的Ajax請求不會自動帶上服務(wù)器返回的Cookie：JSESSIONID您没。
導(dǎo)致每一個Ajax請求在服務(wù)端看來都是一個新的請求，都會在服務(wù)端創(chuàng)建新的Session（在響應(yīng)消息頭中設(shè)置Set-Cookie：JSESSIONID=xxx）扣草。
而在項目中使用了Shiro框架了牛，用戶認(rèn)證信息是放在Session中的，由于客戶端不會把JSESSIONID返回給服務(wù)器端辰妙，因此使用Session策略存放數(shù)據(jù)的方式不可用鹰祸。原因分析
實際上，這是瀏覽器的同源策略導(dǎo)致的問題：不允許JS訪問跨域的Cookie密浑。
舉個例子蛙婴，現(xiàn)有網(wǎng)站A使用域名a.example.com，網(wǎng)站B使用域名b.example.com尔破，如果希望在2個網(wǎng)站之間共享Cookie（瀏覽器可以將Cookie發(fā)送給服務(wù)器）敬锐，那么在設(shè)置的Cookie的時候，必須設(shè)置domain為example.com呆瞻。解決方案
需要從2個方面解決：
1.服務(wù)器端使用CROS協(xié)議解決跨域訪問數(shù)據(jù)問題時台夺，需要設(shè)置響應(yīng)消息頭Access-Control-Allow-Credentials值為“true”。
同時痴脾，還需要設(shè)置響應(yīng)消息頭Access-Control-Allow-Origin值為指定單一域名（注：不能為通配符“*”）颤介。
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletRequest req = (HttpServletRequest)request;
HttpServletResponse resp = (HttpServletResponse)response;
String origin = req.getHeader("Origin");
if(origin == null) {
origin = req.getHeader("Referer");
}
resp.setHeader("Access-Control-Allow-Origin", origin); // 允許指定域訪問跨域資源
resp.setHeader("Access-Control-Allow-Credentials", "true"); // 允許客戶端攜帶跨域cookie，此時origin值不能為“*”，只能為指定單一域名
if(RequestMethod.OPTIONS.toString().equals(req.getMethod())) {
String allowMethod = req.getHeader("Access-Control-Request-Method");
String allowHeaders = req.getHeader("Access-Control-Request-Headers");
resp.setHeader("Access-Control-Max-Age", "86400"); // 瀏覽器緩存預(yù)檢請求結(jié)果時間,單位:秒
resp.setHeader("Access-Control-Allow-Methods", allowMethod); // 允許瀏覽器在預(yù)檢請求成功之后發(fā)送的實際請求方法名
resp.setHeader("Access-Control-Allow-Headers", allowHeaders); // 允許瀏覽器發(fā)送的請求消息頭
return;
}
chain.doFilter(request, response);
}
2.客戶端需要設(shè)置Ajax請求屬性withCredentials=true滚朵，讓Ajax請求都帶上Cookie冤灾。
對于XMLHttpRequest的Ajax請求
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.withCredentials = true; // 攜帶跨域cookie
xhr.send();
// 對于JQuery的Ajax請求
$.ajax({
type: "GET",
url: url,
xhrFields: {
withCredentials: true // 攜帶跨域cookie
},
processData: false,
success: function(data) {
console.log(data);
}
});
3.對于axios的Ajax請求
axios.defaults.withCredentials=true; // 讓ajax攜帶cookie
