CORS Preflight Request §

非简单请求的 CORS 请求，会在正式通信之前，增加一次 HTTP 查询请求，称为”预检”请求（preflight）。

如果一个请求包含了任何自定义请求头，或者它所使用的 HTTP 动词是 GET，HEAD 或 POST 之外的任何一个动词，那么它就是一个Preflighted Request。

如果 POST 请求的 Content-Type 并不是 application/x-www-form-urlencoded，multipart/form-data 或 text/plain 之一，那么它也是 Preflighted Request。

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

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

Request §

Assume JavaScript contains the following code

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

上面代码中，HTTP 请求的方法是 PUT，并且发送一个自定义头信息 X-Custom-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...

OPTIONS “预检”请求用的请求方法是 OPTIONS，表示这个请求是用来询问的。

origin 关键字段是 Origin，表示请求来自哪个源。

Access-Control-Request-Method 该字段是必须的，用来列出浏览器的 CORS 请求会用到哪些 HTTP 方法，上例是 PUT。

Access-Control-Request-Headers 该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是 X-Custom-Header。

Response §

服务器收到”预检”请求以后，將會检查 Origin，Access-Control-Request-Method 和 Access-Control-Request-Headers 等字段

如果允许跨源请求，就可以做出回应 §

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://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

Access-Control-Allow-Origin: http://api.bob.com Access-Control-Allow-Origin 是关键的字段，表示 http://api.bob.com 可以请求数据。该字段也可以设为 *，表示同意任意跨源请求

Access-Control-Allow-Methods: GET, POST, PUT 该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次”预检”请求。

Access-Control-Allow-Headers: X-Custom-Header 如果浏览器请求包括 Access-Control-Request-Headers 字段，则 Access-Control-Allow-Headers 字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在”预检”中请求的字段。

Access-Control-Allow-Credentials: true 该字段与简单请求时的含义相同。

Access-Control-Max-Age: 1728000 该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

如果不允許请求，將会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。 §

浏览器接收到這個回應後，就会认定服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。

XMLHttpRequest cannot load http://api.alice.com.
Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.