使用ajax跨域Cross-Origin Resource Sharing / withCredentials的作用

HTML 5以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信，于是为了达到跨域通信的目的各种蛋疼的解决办法出现了，常用的有：jsonp、使用代理文件、地址栏hash等等，这些办法的出现在达到解决跨域问题的同时，也增加了前端页面的性能开销和维护成本。HTML5新的标准中，增加了” Cross-Origin Resource Sharing”特性，这个特性的出现使得跨域通信只需通过配置http协议头来即可解决。

Cross-Origin Resource Sharing 详细解释见：

http://dvcs.w3.org/hg/cors/raw-file/tip/Overview.html

Cross-Origin Resource Sharing实现的最重要的一点就是对参数” Access-Control-Allow-Origin”的配置，即通过 次参数检查该跨域请求是否可以被通过。

如：Access-Control-Allow-Origin:http://a.com表示允许a.com下的域名跨域访问；

Access-Control-Allow-Origin:*表示允许所有的域名跨域访问。

如果需要读取读取cookie：

默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据。如果服务器接收带凭据的请求，会用下面的HTTP头部来响应。

需要配置参数：

Access-Control-Allow-Credentials:true

同时在xhr发起请求的时候设置参数withCredentials为true：

var xhr = new XMLHttpRequest();
xhr.open();
xhr.withCredentials = true; //这个放在xhr.open后面执行，否则有些浏览器部分版本会异常，导致设置无效。

如果发送的是带凭据的请求，但服务器的相应中没有包含这个头部，那么浏览器就不会把相应交给JavaScript(于是，responseText中将是空字符串，status的值为0，而且会调用onerror()事件处理程序)。另外，服务器还可以在Preflight响应中发送这个HTTP头部，表示允许源发送带凭据的请求。

支持withCredentials属性的浏览器有Firefox 3.5+、Safari 4+和Chrome。IE10及更早版本都不支持。

示例代码：

php:

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

JS：

var xhr = new XMLHttpRequest(); ;
xhr.open('GET', 'http: //b.com/cros/ajax.php', true);
xhr.withCredentials = true;
xhr.onload = function () {
alert(xhr.response);//reposHTML;
};
xhr.onerror = function () {
alert('error making the request.');
};
xhr.send();

参考：http://www.alloyteam.com/2012/11/html5-cors/