CORS:跨域资源共享

定义

是由W3C提出的一个用于浏览器以XMLHttpRequest方式向其他源的服务器发起请求的规范。不同于JSONP，CORS是以Ajax方式进行跨域请求，需要服务端与客户端的同时支持。目前CORS在绝大部分现代浏览器中都是支持的(IE浏览器不能低于10)

原理

CORS标准定义了一个规范的HTTPHeaders来使得浏览器与服务端之间可以进行协商来确定某个资源是否可以由其他域的客户端请求获得。尽管很多的验证与鉴权是由服务端完成，但是本质上大部分的检查和限制还是应该由浏览器完成。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。一般来说CORS会分为简单请求与预检请求两大类。

预检请求

当浏览器的请求方式满足以下的任意一个条件的时候，浏览器会先发送一个OPTION请求，用来与目标域名服务器协商决定是否可以发送实际的跨域请求。OPTIONS请求头部中会包含以下头部：Origin、Access-Control-Request-Method、Access-Control-Request-Headers。
服务器收到OPTIONS请求后，设置Access-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headers头部与浏览器沟通来判断是否允许这个请求。

请求方法不是下列之一：

• GET
• HEAD
• POST

请求头中的Content-Type请求头的值不是下列之一：

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

否则就是预检请求。预检请求会在正式通信之前，增加一次HTTP查询请求。浏览器会先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。预检请求的发送请求：

"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。请求头信息里面，关键字段是Origin，表示请求来自哪个源。
除了Origin字段，"预检"请求的头信息包括两个特殊字段:

• Access-Control-Request-Method:该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是GET。
• Access-Control-Request-Headers:该字段指定浏览器CORS请求会额外发送的头信息字段.

预检请求的返回：

• Access-Control-Allow-Methods:必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次预检请求。
• Access-Control-Allow-Headers:如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在预检中请求的字段。
• Access-Control-Max-Age:该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是5个小时（18000秒），即允许缓存该条回应18000秒（即5小时），在此期间，不用发出另一条预检请求。

一旦服务器通过了预检请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

简单请求

当浏览器的请求方式是HEAD、GET或者POST，并且HTTP的头信息中不会超出以下字段:

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

浏览器会将该请求定义为简单请求，对于简单的跨域请求或者通过了预检的请求，浏览器会自动在请求的头信息加上Origin字段，表示本次请求来自哪个源（协议 + 域名 + 端口），即表明这是一个跨域请求。服务端会获取到这个值，根据相应的跨域规则然后判断是否同意这次请求并返回。典型的请求头尾:

// 请求

 - GET /cors HTTP/1.1
 - Origin: http://localhost:8080
 - Host: api.alice.com
 - Accept-Language: en-US
 - Connection: keep-alive
 - User-Agent: Mozilla/5.0...

如果服务端允许，在返回的头信息中会多出几个字段:

// 返回

 Access-Control-Allow-Origin: http://localhost:8080
 Access-Control-Allow-Credentials: true
 Access-Control-Expose-Headers: Info
 Content-Type: text/html; charset=utf-8

• Access-Control-Allow-Origin:必须。它的值是请求时Origin字段的值或者 *，表示接受任意域名的请求。
• Access-Control-Allow-Credentials:可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。
  再需要发送cookie的时候还需要注意要在AJAX请求中打开withCredentials属性:withCredentials = true;

  需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为*，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

• Access-Control-Expose-Headers:可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方
  法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-
  Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('Info')可以返回Info字段的值。

  如果服务端拒绝了调用，即不会带上 Access-Control-Allow-Origin 字段，浏览器发现这个跨域请求的返回头信息没有该字段，就会抛出一个错误，会被 XMLHttpRequest 的 onerror 回调捕获到。这种错误无法通过 HTTP 状态码判断，因为回应的状态码有可能是200。

总结

服务器端对于跨域请求的处理流程如下：

1. 首先会检测http请求头是否有origin字段;
2. 如果没有，或者不允许，直接当成普通请求处理，结束;
3. 如果有并且是允许的，那么再看是否是预检请求
4. 如果不是预检请求，就返回Allow-Origin、Allow-Credentials等，并返回正常内容。
5. 如果是预检请求，就返回Allow-Headers、Allow-Methods等，内容为空。