跨域登录

• 引言
• 为什么跨域登录后前端页面无法保持登录状态？
• 跨域登录后如何保持会话？

• 引言

前后端分离（部署）项目，登录后可能出现会话无法维持导致立即退出登录的现象。

 

• 为什么跨域登录后前端页面无法保持登录状态？

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");