CORS (Cross-Origin Resource Sharing) 定义了访问跨域资源时,浏览器与服务器如何进行沟通。
其基本思想是: 使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定 请求/响应 是成功还是失败。
当浏览器发送一个简单请求GET或POST时,会在头部附加一个Origin字段,用来说明请求页面的源信息(协议、域名、端口),以便服务器根据这个头部信息来决定是否给予响应。
若服务器认为该请求可以接受,会在Access-Control-Allow-Origin头部中回发相同的源信息(若为公共资源,则回发“*”);
若浏览器发现接收到的响应的头信息没有包含Access-Control-Allow-Origin字段,就知道出错了,从而抛出一个错误,被XMLHttpRequest的onerror回调函数捕获。
【IE对CORS的实现】
IE8引入了XDR(XDomainRequest)类型,能实现安全可靠的跨域通信。
【XDR与XHR区别】:
1. cookie不在请求和响应中
2. 不能访问响应的头部信息,没办法判断status
3. 只支持GET和POST请求
4. 只能设置请求头部信息中的Content-Type字段
5. 所有XDR请求都是异步的,因此open()方法之接受两个参数:请求类型和URL
//GET
var xdr = new XDomainRequest();
xdr.onload = function(){
console.log(xhr.responseText);
};
xdr.onerror = function(){
console.log("发生错误");
};
xdr.open("get","url");
xdr.send(null);
为支持POST请求,XDR提供了contentType属性用来表示数据格式。
//POST
var xdr = new XDomainRequest();
xdr.onload = function(){
console.log(xhr.responseText);
};
xdr.onerror = function(){
console.log("发生错误");
};
xdr.open("post","url");
xdr.contentType = "application/x-www-form-urlencoded";
xdr.send("序列化的字符串");
【其他浏览器对CORS的实现】
没有XDR类型,通过XHR实现对CORS的原生支持。默认情况下,XHR对象实现的Ajax通信只能是访问同域资源。要跨域请求资源,在open()方法中传入绝对URL即可。
【跨域XHR与默认XHR区别】:
1. 不能使用setRequestHeader()设置自定义头部
2. 不能发送和接收cookie
3. 调用getAllResponseHeaders总是返回空字符串
4. 使用绝对URL
var xhr = createXHR();
xhr.readystatechange = function(){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300)||xhr.status == 304){
console.log(xhr.responseText);
}
else{
console.log("请求失败:"+xhr.status);
}
}
};
xhr.open("get","绝对URL",true);
xhr.send(null);
【跨浏览器实现CORS】
function createCORSRequest(method,URL){
var xhr = createXHR();
if("withCredentials" in xhr){
xhr.open(method,URL,true);
}
else if(typeof XDomainRequest != "undefined"){
var xhr = new XDomainRequest();
xhr.open(method,URL);
}
else{
xhr = null;
}
return xhr;
}
var request = createCORSRequest("get",URL);
if(request){
request.onload = function(){
//对request.responseText进行处理
};
request.send();
}
【Preflight Request预检请求】
浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。
【以下请求不会发起CORS预检请求】:
- HEAD
- GET
- POST(Content-Type为text/plain、multipart/form-data、application/x-www-form-urlencoded)
【使用OPTIONS方法,发送下列头部】:
Origin: 发起请求的URL
Access-Control-Request-Method: 该请求的类型
Access-Control-Request-Headers: 自定义的头部信息,多个头部字段用逗号隔开
【服务器响应预检,返回下列头部】:
Access-Control-Allow-Origin: 与Origin一样
Access-Control-Allow-Methods:允许的请求方法,多种方法用逗号分隔
Access-Control-Allow-Headers: 允许的头部字段,多个头部字段用逗号分隔
Access-Control-Max-Age: 将该preflight请求缓存多少秒
默认情况下,跨域请求不提供凭据。在预检请求的返回中,服务器端可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。具体做法是将请求的withCredentials属性设置为true。若服务器接受带凭据的请求,响应中会有:
Access-Control-Allow-Credentials: true
【举个例子】:
var invocation = new XMLHttpRequest();
//要访问的跨域资源
var url = 'http://bar.other/resources/post-here/';
var body = '<?xml version="1.0"?><person><name>Arun</name></person>';
function callOtherDomain(){
if(invocation)
{
invocation.open('POST', url, true);
invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
invocation.setRequestHeader('Content-Type', 'application/xml');
invocation.onreadystatechange = handler;
invocation.send(body);
}
}
//浏览器发起预检请求
OPTIONS /resources/post-here/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://foo.example //发起请求的源信息
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type
//服务器返回响应
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://foo.example //与预检请求的Origin一致
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
//预检请求完成之后,浏览器发送实际请求:
POST /resources/post-here/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
X-PINGOTHER: pingpong
Content-Type: text/xml; charset=UTF-8
Referer: http://foo.example/examples/preflightInvocation.html
Content-Length: 55
Origin: http://foo.example
Pragma: no-cache
Cache-Control: no-cache
<?xml version="1.0"?><person><name>Arun</name></person>
//服务器回发响应
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:40 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://foo.example
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 235
Keep-Alive: timeout=2, max=99
Connection: Keep-Alive
Content-Type: text/plain
[Some GZIP'd payload]
【参考文档】https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS