(面试) 跨域实现方法之CORS

### 一. CORS（Cross-Origin Resource Sharing,跨域源资源共享）

　　基本思想：使用自定义HTTP头部让浏览器与服务器进行沟通

　　　　发送请求时，需附加一个Origin头部

　　　　　　eg： Origin: http://www.xxx.net

　　若是服务认为这个请求能够接受，就在Access-Control-Allow-Origin投不中回发相同的源信息

　　　　Access-Control-Allow-Origin: http://www.xxx.net

　　1) IE对CORS的实现

　　　　XDR（XDomainRequest），这个对象与XHR相似

　　　　　　1.1） 与XHR区别：

　　　　　　　　cookie不会随请求发送，也不会随响应返回

　　　　　　　　只能设置请求头部信息中的Content-Type字段

　　　　　　　　不能访问响应头部信息

　　　　　　　　只支持GET和POST请求

　　　　该对象的建立与发送请求的方法与XHR类似，但open()方法只含两个参数（请求类型，URL）

　　　　**全部的XDR请求都是异步执行的**

　　　　eg： var xdr = new XDomainRequest（）；

　　　　　　　xdr.onload = function(){

　　　　　　　　　alert(xdr.responseText);

　　　　　　　}

　　　　　　　xdr.open("get",http://www.xxx.com/page/*);

　　　　　　　xdr.send(null)

　　　　在接收到响应后，你只能访问响应的原始文本；没有办法肯定响应的状态代码，只要成功就会触发load事件，若是失败触发error事件

　　　　XDR提供了contentType属性，用来表示发送数据的格式，定义在open及send方法之间

　　2.）其余浏览器对CORS的实现

　　　　其余浏览器经过XMLHttpRequest对象实现对CORS的原生支持

　　　　请求位于另一个域中的资源，使用标准 的XHR对象并在open中的URL中传入绝对URL便可

　　　　　　eg： xhr.open("GET","http://www.somewhere.com/page/",true)

　　3.) 带凭据的请求

　　　　默认状况下，跨源请求不提供凭据（cookie、HTTP认证及客户端SSL证实等）。经过将withCredentials属性设置为true，能够指定某个请求应该发送凭据

　　　　　　

　　　　　　XMLHttpRequest.withCredentials 属性是一个Boolean类型，它指示了是否该使用相似cookies,authorization headers(头部受权)或者TLS客户端证书这一类资格证书来建立一个跨站点访问控制（cross-site Access-Control）请求。在同一个站点下使用withCredentials属性是无效的。

　　　　　　此外，这个指示也会被用作响应中cookies 被忽视的标示。默认值是false。

　　　　　　若是在发送来自其余域的XMLHttpRequest请求以前，未设置withCredentials 为true，那么就不能为它本身的域设置cookie值。而经过设置withCredentials 为true得到的第三方cookies，将会依旧享受同源策略，所以不能被经过document.cookie或者从头部相应请求的脚本等访问

　　4.） 跨浏览器的CORS

　　　　检测XHR是否支持CORS的最简单方法，就是检查是否存在withCredentials属性。再结合检测XDomainRequest对象是否存在

　　　　eg：

　　　　　　function createCORSRequest(method,url){

　　　　　　　　var xhr = new XMLHttpRequest();

　　　　　　　　if("withCredentials" in xhr){

　　　　　　　　　　xhr.open(method,url,true)

　　　　　　　　}else if(typeof XDomainRequest != "undefined"){ // IE

　　　　　　　　　　xhr = new XDomainRequest

　　　　　　　　}else{

　　　　　　　　　　xhr = null

　　　　　　　　}

　　　　　　　　return xhr;　　　　　　　　　

　　　　　　}

　　　　var request = createCORSRequset("get","http://somewhere-else.com/page/")

　　　　if(request){

　　　　　　request.onload = function(){

　　　　　　　　alert(request.responseText)

　　　　　　}

　　　　　　request.send()

　　　　}