Ajax跨域請求,沒法傳遞及接收cookie信息解決方案

最近的項目中涉及到了應用ajax請求後臺系統登陸，身份認證失敗，通過不斷的調試終於找到解決方案。

應用場景：

　　項目測試環境：前端應用HTML，js，jQuery ajax請求，部署在Apache服務器；後端業務系統應用spring mvc，mybatis，部署在tomcat服務器。當在一個系統須要調用另外一個系統的時候，就會出現跨域的問題，即本次咱們遇到了ajax請求的跨域問題。

　　系統權限安全框架使用shiro，系統登陸時發送ajax請求調用springmvc action方法進行系統登陸及身份認證，角色權限受權等。因爲ajax請求時，瀏覽器會認爲攜帶Cookie是不安全請求，將限制其攜帶Cookie信息，致使登陸action方法沒法獲取並響應相應的Cookie（JSESSIONID），身份認證及角色權限受權、退出等都操做都沒法正常使用。

解決方案：

　　一、當發送ajax請求時，查看瀏覽器調試信息中Headers和Cookies，發現發送到後端的跨域請求並無攜帶 cookie 信息，可見Request Headers不包含Cookie屬性，Response Headers中也不包含Set-Cookie屬性，致使沒法獲得後臺業務系統的認證。

 　　

　　解決：在ajax裏添加withCredentials的配置，容許其請求攜帶cookie信息。經過設置withCredentials=true，發送Ajax時，Request header中便會帶上 Cookie 信息。

$.ajax({
            type: "post", url:url, async:false, data:datatosend, dataType:"json", beforeSend: function(xhr) { xhr.withCredentials = true; } crossDomain:true, success: function (data) { var a=JSON.stringify(data); if(data.result==true){ 　　........... 　　 }else{ 　　　　 　　........... 　　　　 } }, error:function (data) { var a=JSON.stringify(data); alert(a); } }); 

　　注意：<踩過的坑>咱們在beforeSend方法裏設置withCredentials=true；在上述代碼情境下，若是使用xhrFields:{ withCredentials:true }方法，則容許攜帶cookie信息的配置並不生效。（緣由：ajax中添加了async:false，即修改成同步了，在窗口上下文的同步模式中，已再也不支持使用XMLHttpRequest的withCredentials屬性）。當保持異步模式時，咱們能夠更換對應的方法。注意2種方法的區分。

 　　二、服務器server端要配置Access-Control-Allow-Credentials

　　咱們在客戶端設置了withCredentials=true 參數，對應着，服務器端要經過在響應 header 中設置Access-Control-Allow-Credentials = true來運行客戶端攜帶證書式的訪問。經過對Credentials參數的設置，就能夠保持跨域Ajax時傳遞的Cookie。

response.setHeader("Access-Control-Allow-Credentials", "true");

　　三、服務器server端要配置Access-Control-Allow-Origin

　　到以上配置爲止，發送ajax請求，咱們發現還會出現一個錯誤，提示咱們 Access-Control-Allow-Origin 不能用 * 通配符。緣由是：當服務器端 Access-Control-Allow-Credentials = true時，參數Access-Control-Allow-Origin 的值不能爲 '*' 。

　　咱們從新設置Access-Control-Allow-Origin的值，當服務器端接收到請求後，在返回響應時，把請求的域Origin填寫到響應的Header信息裏（即誰訪問我，我容許誰），代碼以下：

response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));

　　ok，到目前問題搞定了，通過測試，可成功傳遞及響應cookie信息，瀏覽器調試信息以下圖所示：