ajax跨域请求时，sessionId不同，致使没法记住登录状态

遇到这样一个场景，就是前端的域是dev，请求接口时，接口的域是beta，即便在服务端设置了cookie存放的域，'COOKIE_DOMAIN'   =>  '.roboming.com',虽然cookie的域是正确了，但是sessionid的域仍是不对，状况以下：

 

这个是登录页面

 

这是用户列表页，没法获取cookie，缘由是两次请求不是同一个sessionid，服务器端，认为尚未登录。

 

 

解决方法是：

 

一、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

 

二、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，能够做为一种跨域请求以及响应的解决方案，不过，使用的频率较少，缘由大概有如下几种：

一、资料较少，网上搜到的“经验之谈”绝大多数也都是你抄我，我cp他，使用不当还可能形成安全隐患。

二、目前主流的处理方式是使用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哦~