### 一. 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()
}