跨域請求傳遞Cookie問題
阿新 • • 發佈:2017-11-21
ref 指定 ssi let servle cat headers logs cnblogs 值為“true”。
同時,還需要設置響應消息頭
問題描述
前後端完全分離的項目,前端使用Vue + axios,後端使用SpringMVC,容器為Tomcat。
使用CORS協議解決跨域訪問數據限制的問題,但是發現客戶端的Ajax請求不會自動帶上服務器返回的Cookie:JSESSIONID。
導致每一個Ajax請求在服務端看來都是一個新的請求,都會在服務端創建新的Session(在響應消息頭中設置Set-Cookie:JSESSIONID=xxx)。
而在項目中使用了Shiro框架,用戶認證的信息是放在Session中的,由於客戶端不會把JSESSIONID返回給服務器端,因此使用Session策略存放數據的方式不可用。
解決方案
需要從2個方面解決:
1.服務器端使用CROS協議解決跨域訪問數據問題時,需要設置響應消息頭Access-Control-Allow-Credentials
同時,還需要設置響應消息頭
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"); // 瀏覽器緩存預檢請求結果時間,單位:秒
resp.setHeader("Access-Control-Allow-Methods", allowMethod); // 允許瀏覽器在預檢請求成功之後發送的實際請求方法名
resp.setHeader("Access-Control-Allow-Headers", allowHeaders); // 允許瀏覽器發送的請求消息頭
return;
}
chain.doFilter(request, response);
}
2.客戶端需要設置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); } });
對於axios的Ajax請求
axios.defaults.withCredentials=true; // 讓ajax攜帶cookie
【參考】
http://harttle.com/2016/12/28/cors-with-cookie.html CORS 跨域發送 Cookie
https://segmentfault.com/q/1010000009193446 vuejs (前端項目) + spring mvc(後臺項目),每次ajax請求都是新的session Id
https://www.w3.org/TR/cors/ Cross-Origin Resource Sharing
跨域請求傳遞Cookie問題