跨域請求傳遞Cookie問題

問題描述

先後端徹底分離的項目，前端使用Vue + axios，後端使用SpringMVC，容器爲Tomcat。
使用CORS協議解決跨域訪問數據限制的問題，可是發現客戶端的Ajax請求不會自動帶上服務器返回的Cookie：JSESSIONID。
致使每個Ajax請求在服務端看來都是一個新的請求，都會在服務端建立新的Session（在響應消息頭中設置Set-Cookie：JSESSIONID=xxx）。
而在項目中使用了Shiro框架，用戶認證信息是放在Session中的，因爲客戶端不會把JSESSIONID返回給服務器端，所以使用Session策略存放數據的方式不可用。

緣由分析

實際上，這是瀏覽器的同源策略致使的問題：不容許JS訪問跨域的Cookie。
舉個例子，現有網站A使用域名a.example.com，網站B使用域名b.example.com，若是但願在2個網站之間共享Cookie（瀏覽器能夠將Cookie發送給服務器），那麼在設置的Cookie的時候，必須設置domain爲example.com。

解決方案

須要從2個方面解決：
1.服務器端使用CROS協議解決跨域訪問數據問題時，須要設置響應消息頭Access-Control-Allow-Credentials值爲「true」。
同時，還須要設置響應消息頭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