跨域登陸

• 引言
• 爲何跨域登陸後前端頁面沒法保持登陸狀態？
• 跨域登陸後如何保持會話？

• 引言

先後端分離（部署）項目，登陸後可能出現會話沒法維持致使當即退出登陸的現象。

 

• 爲何跨域登陸後前端頁面沒法保持登陸狀態？

Web 應用登陸後，服務端會產生會話來存儲用戶信息，好比用戶ID、用戶名以及用戶會話ID等等。當登陸請求返回客戶端（瀏覽器）時，返回信息會包含一些 Cookie 信息，一般有會話ID，JAVA後臺一般是「JSESSIONID」，瀏覽器會根據服務端返回的 Cookie 信息產生相應的 Cookie。

若是客戶端和服務端沒有跨域，那麼在下一次客戶端請求服務端時，瀏覽器會自動攜帶 Cookie 信息，服務端檢測到客戶端的請求包含會話信息，通過比對，若是會話信息準確而且沒有過時，那麼客戶端仍是處於登陸狀態而且能訪問被受權資源。

可是瀏覽器 不能讀取跨域的 Cookie 信息。所以，當客戶端跨域訪問時，瀏覽器 不能 讀取先前 跨域的服務端 返回的 Cookie 信息。服務端檢測不到客戶端請求的會話信息，因此，服務端判斷 客戶端並無登陸！

 

• 跨域登陸後如何保持會話？

要解決跨域登陸保持會話，首先要確保登陸後的請求能夠讀取登陸時設置的跨域 Cookie，其次是登陸後的請求要能攜帶登陸時的 Cookie。

以 jQuery 插件爲例，發送請求時，設置「crossDomain: true」以及「xhrFields: {withCredentials: true}」便可。以下代碼所示：

$.ajax({ type: "POST", url: baseURL + "users/garnetlogin", data: data, contentType: "application/json", crossDomain: true, xhrFields: { withCredentials: true }, success: function (result) { // code..
 } });

 

固然，服務端也須要容許客戶端跨域、容許客戶端發送憑證。以下 JAVA 代碼所示（假設客戶端域爲「http://localhost.cn」）：

response.setHeader("Access-Control-Allow-Origin", "http://localhost.cn"); response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE"); response.setHeader("Access-Control-Allow-Headers", "*"); response.setHeader("Access-Control-Allow-Credentials", "true");