ajax跨域請求時，sessionId不一樣，導致無法記住登陸狀態

遇到這樣一個場景，就是前端的域是dev，請求接口時，接口的域是beta，即使在服務端設置了cookie存放的域，'COOKIE_DOMAIN'   =>  '.roboming.com',雖然cookie的域是正確了，可是sessionid的域還是不對，情況如下：

 

這個是登陸頁面

 

這是用戶列表頁，無法獲取cookie，原因是兩次請求不是同一個sessionid，服務器端，認為還沒有登陸。

 

 

解決方法是：

 

1、php服務器端設置運行cros跨域請求

header("Access-Control-Allow-Origin:http://dev.roboming.com");
header('Access-Control-Allow-Credentials:true');
header('Access-Control-Allow-Methods:GET, POST, OPTIONS');

第二行代碼是允許客戶端帶上cookie

 

2、js的ajax，設置

xhrFields:{

    withCredentials:true

},

設置之后，再次請求，請求結果如下：

 

這一次，請求的時候，把所有cookie都帶上去了，第一次，之所以沒有帶上sessionid，因為sessionid的域是beta下的，而客戶端是在dev域下，所以請求時，無法帶上beta域下的sessionid。

整個提交如下

$.ajax({
    url: 'http://beta.roboming.com/api.php?s=/Public/AdminLogin.html',
    type: 'POST',
    async:true,
    xhrFields:{
        withCredentials:true
    },
    data: {
        username:userName,
        password:pwd
    },
    success: function(respon){
        console.log(respon);
        var res=eval(respon);
    },
    error: function(){
        alert('服務器發生錯誤！');
    }
});

原理：

Cross-Origin Resource Sharing，跨域資源共享，簡稱 CORS，可以作為一種跨域請求以及響應的解決方案，不過，使用的頻率較少，原因大概有以下幾種：

1、資料較少，網上搜到的“經驗之談”絕大多數也都是你抄我，我cp他，使用不當還可能造成安全隱患。

2、目前主流的處理方式是使用JSONP，易於實現，兼容性好，可查的資料也很多。而  IE10以下 版本的瀏覽器是不支持 CORS 的 ，因此，如果要求兼容IE瀏覽器，會導致使用此種方式的跨域請求以及傳遞Cookie的計划夭折，最終還得回歸JSONP。

CORS的原理是：

W3C對你說：內個，同學們，我們為了解決跨域通信問題，新增了一個標准，大家在使用時，加一下就行了~

雖然是一句玩笑話，但。。事實確實如此。我們之所以能夠“互聯”，協議 是根基。

CORS的使用方式：

以下均是模擬 從 A. abc.com  發起一個到 B. abc.com  的請求 的場景，即 本次 “跨域” 並非 “大跨”，而是在 根域相同 的情況下，去 請求 不同的子域 。

先解釋一下，為什么要用 子域之間的請求 作為模擬場景：

這是因為多數人會認為跨域，就是不同根域之間的請求，或者認為根域相同的  不同的子域名之間是安全的調用，這些都是對跨域錯誤的認識。

實際上瀏覽器同源策略禁止了不同子域名之間的請求。 

需求一：能讓我跨就行

這也是最簡單的需求，在 B 的服務端程序中，增加響應頭：

// 使用通配符 * ，表示當前服務端 返回的信息允許所有源訪問， 不推薦

header( 'Access-Control-Allow-Origin:*' );

// 指定可信任的域名來接收響應信息， 推薦

header( 'Access-Control-Allow-Origin:http://A.abc.com' );

如此一來，一個跨域請求就不會被瀏覽器的 同源安全策略所阻止了。

需求二：跨過去以后，我還得操作Cookie

Well~ 讓我們在 B 的服務端程序中，繼續補增響應頭：

// 允許攜帶 用戶認證憑據（也就是允許客戶端發送的請求攜帶Cookie）

header( 'Access-Control-Allow-Credentials:true' );

同時，A 在向 B 發起請求的時候，需要將 XMLHttpRequest 對象的  withCredentials 屬性設置為 true，JQuery1.5.1+ 提供了相應的字段，使用方式如下：

$.ajax({ 
    url:"B. abc.com ", 
    xhrFields:{ 
        withCredentials:true 
    },
}); 

這樣，你會在 B 端發現：哦也~ 收到 Cookie 了。

設置 withCredentials 為 true 的請求中會包含 A 端的所有Cookie，這些Cookie仍然遵循同源策略，所以，你只能訪問其中和 B 端同根域的Cookie，而無法訪問其他域Cookie。

總結一下就是：

要想跨域，你得有后台（需要服務器端配合）。

BTW：Firefox，發現你和Chrome的表現不一致的情況還真不多。Firefox中不要在同步模式（async:false）下傳遞Cookie哦~