CORS正确使用姿势

CORS用法

首先要知道的是对于CORS，我们要用到XHR2，然后IE的话是XDomainRequest Object，它从IE10开始才是XHR2. IE 8 9都是XDomainRequest

首先需要写一个处理兼容性的函数，确定是哪个浏览器上运行

function createCORSRequest(method,url){
var xhr=new XMLHttpRequest();
if("withCredentials" in xhr)    {
//Check if the XMLHttpRequest object has a "withCredentials" property
//this property only exists on XHR 2 object

}else if(typeof XDomainRequest!='undefined'){
//otherwise check if XDomainRequest
//XDomainRequest only exists in IE
xhr =new XDomainRequest();
xhr.open(method,url);
}else{
//othewise CORS is not supported by the browser
xhr=null;
}
return xhr;
}

该函数先检测XHR对象是否有withCredentials属性，这个属性只有XHR2的对象才有。

然后检测XDomainRequest是否存在。

实际的请求处理代码

function makeCORSRequest(){
//
var url='';
var xhr=createCORSRequest('GET',url);
if(!xhr){
throw new Error('CORS not supported');
return ;
}
//Reponse Handlers
xhr.onload=function(){
var text=xhr.responseText;
var title=getTitle(text);
console.log('Response from CORS request to ' + url + ': ' + title);
};

xhr.onerror=function(){
alert('Woops, there was an error making the request.');
};

xhr.send(); //send(data)
}

我们做了一个简单的GET请求，如果xhr不存在，即这是个不支持CORS的浏览器，就抛出这个错误并返回。

然后在onload(成功请求并返回)的事件中处理我们的业务，在onerror里面是处理请求过程出错的业务。

注意

浏览器对于出错的report不是做的很好，比如FF仅仅report status 0 和一个空的statusText for all errors！ 浏览器可能会console.log输出信息，但是这些信息不能被js访问到！！！ 所以handle onerror你仅仅是知道出错了。

XHR2新增的事件及其含义

Event Handler	Description
onloadstart	请求开始的时候
onprogress	当前正在加载读取数据中
onerror	请求失败
onload	请求成功完成
ontimeout	在请求完成之前超时了

注意：XHR以前只有一个onreadystatechange事件

添加CORS支持到服务器

在CORS中，当我们处理浏览器和服务器浏览器时，浏览器会添加一些额外的headers，还可能做一些额外的请求(浏览器自动发出)

我们可以通过抓包工具（例如fiddle）看到这些被隐藏起来的请求。



可以看到浏览器发送了preflight request

CORS请求类型

简单请求和非简单请求

简单请求就是

- HEAD

- GET

- POST

HTTP Headers 匹配下面的

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type, 但值是其中的一种:

application/x-www-form-urlencoded

multipart/form-data

text/plain

简单的请求我们只需要用JSON-P或者HTML 表单post来请求即可，不需要用到CORS。

处理CORS和同源的原理

注意的是一个有效的CORS请求，总是包含了一个“Origin” header，这是被浏览器自动附加的，但是这个并不是表明这个请求一定是跨域请求。 一些浏览器的同源请求也会有这个header。

一个HTTP 请求例子：

POST /cors HTTP/1.1
Origin:http://api.bob.com
Host: api.bob.com

不过浏览器会expect CORS的响应头，如果是跨域的情况下，同源的时候，它不会理会是否有CORS 的headers。

一个有效的服务器CORS响应：

Access-Control-Allow-Origin: http://api.bob.com Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

详解介绍这些响应的意义

Access-Control-Allow-Origin(required)

这个header必须included，所有有效的CORS响应都必须要有。 它的值可以设置成特定的origin 或者 是 “*”,一般也就是你请求脚本所在的源。

Access-Control-Allow-Credentials(optional)

默认，cookie是不会在CORS请求中被附加的，使用这个头，设置成true表示客户端可以附加cookie到CORS请求。 如果你不需要cookie就不用设置。

不要设置成false！！！！

如果在你的JS中设置了XHR 2 对象的widthCredentials属性，这个属性也都必须设置成true才能成功。

两个都必须有

另外附加说明：

这些跨域设置的cookie，也遵循同源策略，你的JS不能通过document.cookies or response headers访问这些cookies

只能被remote domain (即远端服务器)所控制。

Access-Control-Expose-Headers (optional)

XHR2 对象有一个getResponseHeader()方法，返回特定的响应头。 当一个CORS请求时，getResponseHeader()方法默认只能访问下面这些简单的响应头：

Cache-Control

Content-Language

Content-Type

Expires

Last-Modified

Pragma

如果你要访问其他header，就要用这个Access-Control-Expose-Headers

如果一个不那么简单的请求，实际包括两个请求

一个preflight request和一个actual request

JS代码

var url = 'http://api.alice.com/cors';
var xhr = createCORSRequest('PUT', url);
xhr.setRequestHeader(
'X-Custom-Header', 'value');
xhr.send();

HTTP请求响应如下

Preflight Reqeust Header

OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

Preflight Response Header

Access-Control-Allow-Origin: http://api.bob.com Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8

preflight请求是一个HTTP OPTIONS 请求，你的服务器要能够响应这种method。

它也包含了一些专有的request heaer

Access-Control-Request-Method

指定实际请求的HTTP method，这个一定要有。

Access-Control-Request-Headers

Preflight Request的作用

发送HTTP OPTIONS方法试探真实请求是否能够安全发送，询问是否允许真实请求(actual request)。服务端会根据两个headers来验证HTTP method和真实请求的method是否有效。

对于Preflight response

有以下的response header：

Access-Control-Allow-Origin

同样是必须提供的

Access-Control-Allow-Methods

允许的HTTP 方法，这个响应头可以包含服务器支持的所有HTTP方法。 因为preflight response可能被cached缓存，所以一个简单preflight response可以包含很多细节关于多种请求类型。

Access-Control-Allow-Headers

如果请求有一个 Access-Control-Request-Headers header的header就需要这个响应头~

可以返回所有服务器支持的响应头。

Access-Control-Max-Age

这个响应头可以使得每个preflight请求变得昂贵。

因为浏览器时做了两个请求weighted每个客户端请求。这个响应头可以让响应被缓存（cached）一个特定的时间。

我们来看真实(实际)请求

请求体

PUT /cors HTTP/1.1
Origin: http://api.bob.com Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

响应体

Access-Control-Allow-Origin: http://api.bob.com Content-Type: text/html; charset=utf-8

我们可以看到真实请求中，我们的方法是put，而响应少了很多header，因为前面的preflight响应过了。

服务器如何拒绝

如果服务器要拒绝CORS请求，直接返回一个没有CORS header的普通响应即可。

有时服务器想要拒绝请求如果在preflight请求中的HTTP method 或者首部(headers)是无效的。

浏览器接收到响应之后，发现没有CORS的headers，就不会做一个真实(实际)的请求。

兼容性

Chrome 3+

Firefox 3.5+

Opera 12+

Safari 4+

Internet Explorer 8+