post请求失败，变成options请求（CORS）

问题

post请求失败，变成options请求（CORS）的原因

简答

浏览器为了安全起见，会先发送一个 options 请求，确保请求发送是安全的，一般 post、delete、put 等请求都会修改服务器资源，所以浏览器会先发一个请求，问问服务器是否会正确（允许）请求。

出现 `options` 的情况一般为

非 get | post 请求
post 请求的 content-type 不是常规的三个
post 请求的 payload 为 text/xml

因为跨域，浏览器会为了试探服务器是否会接受请求，先发送一个 options 请求。即便是服务器允许程序跨域访问，若不支持 options 请求，请求也会死掉。

场景

要使用 XMLHttpRequest 对象 POST 请求不在同一域名下的一个站点，即：跨域请求，请求数据格式为 JSON 。

因此需要使用 setRequestHeader() 方法设置 Content-Type 为 application/json 。设置完这个自定义的 HTTP Headers 后，发现原本可以跨域 post 请求失效了。调试对应的服务端代码，发现 post 请求变成了 options 请求。

这与 CORS（Cross-Origin Resource Sharing，跨站资源共享）策略有关，设置 Content-Type 后，CORS 简单请求变为 Preflighted 请求。在 Preflighted 请求中，XMLHttpRequest 对象会首先发送 options 嗅探，以验证是否有对指定站点的访问权限。

XHR对HTTP请求的访问控制

XHR对象对于HTTP跨域请求有三种：

简单请求
Preflighted请求
Preflighted认证请求

简单请求不需要发送 options 嗅探请求，但只能按发送简单的get、head或post请求，且不能自定义 HTTP Headers。

Preflighted请求和认证请求，XHR 会首先发送一个 options 嗅探请求，然后 XHR 会根据 options 请求返回的 Access-Control-* 等头信息判断是否有对指定站点的访问权限，并最终决定是否发送实际请求信息。

1. 简单请求

简单请求进行跨域访问时，XMLHttpRequest 对象会直接将实际请求发送给服务器。

简单请求具有如下特点：

只能使用 get、head、post 方法。
使用 post 方法向服务器发送数据时，Content-Type只能使用 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 编码格式。
请求时不能使用自定义的 HTTP Headers

//例如：'http://kubiji.cn' 对 'http://scutephp.other' 有跨域访问权限，我们进行简单请求简单请求后，查看请求头及服务返回头信息。
var xhr = new XMLHttpRequest();
var url = 'http://itbilu.other/resources/public-data/';
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        //显示请求结果
        console.log(xhr.getAllResponseHeaders());
    }
};
xhr.send();


// 服务器收到的HTTP请求头，及服务器响应头如下：
//服务器收到的请示头
GET /resources/public-data/ HTTP/1.1
Host: itbilu.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36
Accept-Language:en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4,zh-TW;q=0.2,da;q=0.2
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://kubiji.cn/demo/xhr.html
Origin: http://itbilu.com
//服务响头
HTTP/1.1 200 OK
Date: Tue, 22 SEP 2015 22:23:53 GMT
Server: Nginx/1.8.0 
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml
[XML Data]

通过上面的信息我们可以看出:XHR 在发送 HTTP 请求时，还发送了一个自定义的 HTTP Headers 字段 Origin，由于这是一个简单请求，所在 XHR 并没有发送 OPTIONS 嗅探请求。
通过服务器的响应头 Access-Control-Allow-Origin: * 可以看出，其对所有站点都是可以通过 XMLHttpRequest 对象访问的。

2. `Preflighted`请求

Preflighted请求与简单请求不同，Preflighted 请求首先会向服务器发送一个 Options 请求，以验证是否对指定服务有访问权限，之后再发送实际的请求。

Preflighted 请求具有以下特点：

除GET、HEAD、POST方法外，XHR都会使用Preflighted 请求。

使用 POST 方法向服务器发送数据时，Content-Type 使用 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 之外编码格式也会使用 Preflighted 请求。

使用了自定义的HTTP Headers后，也会使用Preflighted 请求。

现在很多数据交互都是基本JSON格式的，下面是一个向服务发送JSON数据的示例：

var xhr = new XMLHttpRequest();
var url = 'http://scutephp.other/resources/post-json/';
var body = {name:'HELLO'};
xhr.open('POST', url, true);
xhr.setRequestHeader('X-ITBILU', 'baidu.com');
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        console.log(xhr.responseText);
        }
};
xhr.send(JSON.stringify(body));

在上面的示例中，我们向指定的服务器发送了 JSON 字符串，指定了一个自定义的头信息 X-ITBILU，同时还指定了 Content-Type 为 application/json。下面是服务器收到的请求头信息，及服务器的响应头信息：

//服务器收到的OPTIONS请求头
OPTIONS /resources/post-json/ HTTP/1.1
Host: itbilu.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
Accept-Language: en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4,zh-TW;q=0.2,da;q=0.2
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://kubiji.cn
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-ITBILU
//服务器对OPTIONS请求的响应头
HTTP/1.1 200 OK
Date: Tue, 22 SEP 2015 22:23:55 GMT
Server: Nginx/1.8.0
Access-Control-Allow-Origin: http://kubiji.cn
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-ITBILU
Access-Control-Max-Age: 1728000
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
//服务器收到的实际POST请求的请求头
POST /resources/post-json/ HTTP/1.1
Host: itbilu.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
Accept-Language: en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4,zh-TW;q=0.2,da;q=0.2
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
X-PINGOTHER: itbilu.com
Content-Type: application/json;charset=UTF-8
Referer: http://kubiji.cn/demo/xhr.html
Content-Length: 55
Origin: http://itbilu.com
Pragma: no-cache
Cache-Control: no-cache

{"name":"IT笔录"}

//服务器对POST请求的响应头
HTTP/1.1 200 OK
Date: Tue, 22 SEP 2015 22:23:55 GMT
Server: Nginx/1.8.0
Access-Control-Allow-Origin: http://itbilu.com
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 256
Keep-Alive: timeout=2, max=99
Connection: Keep-Alive
Content-Type: tapplication/json
[Some GZIP'd payload]

在上面的请求中，我们可以看，XHR第一次并没有发送实例的 POST 请求，而是发送了一个 OPTIONS 请求。在 OPTIONS 请求，服务器收到了以下几个自定义头信息：

Origin: http://itbilu.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-ITBILU

在上面的请示头中：Access-Control-Request-Method 告诉服务器接下来的实际请求是一个 POST 请求。Access-Control-Request-Headers 告诉服务器接下来实际请求将包含一个自定义的请求头 X-ITBILU。

而在服务器对 OPTIONS 请求的响应头中，包含了以下头信息:

Access-Control-Allow-Origin: http://itbilu.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-ITBILU
Access-Control-Max-Age: 1728000

在上面的响应头中：

Access-Control-Request-Method 告诉请求对象（XHR），服务允许使用POST、GET、OPTIONS方法访问资源。

Access-Control-Request-Headers 告诉请求对象，服务器允许包含自定义请求头X-ITBILU。

Access-Control-Max-Age 告诉请求对象验证有效时长，在接下来的1728000秒（20天）不用再发送 OPTIONS 请求验证合法性。

在 XMLHttpRequest 对象发送 OPTIONS 请求并验证完以上头信息后，才最终发送了实际的 POST 请求。

3. 认证请求

XMLHttpRequest 可以在跨域请求时发送认证信息，但在默认情况下 HTTP Cookies 和 HTTP 认证是不被发送的。要发送 Preflighted 认证请求需要设置 XMLHttpRequest 对象的 withCredentials 属性：

var xhr = new XMLHttpRequest();
var url = 'http://itbilu.other/resources/credentialed-content/';
xhr.open('GET', url, true);
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) { //显示请求结果
        console.log(xhr.getAllResponseHeaders());
    }
};
xhr.send();

在上面的示例中，我们设置了 XMLHttpRequest 对象的 withCredentials 属性为 true。虽然这是个简单请求，由于发送了认证信息，所以浏览服务器会拒绝没有 Access-Control-Allow-Credentials: true 响应头的服务器响应。
上面请求的请求头和响应头如下：

GET /resources/access-control-with-credentials/ HTTP/1.1
Host: itbilu.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
Accept-Language: en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4,zh-TW;q=0.2,da;q=0.2
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://itbilu.com/demo/credential.html
Origin: http://itbilu.com
Cookie: Hm_lvt_782f5a889da9ba4cae3c5f5575784ec3=1417282790
HTTP/1.1 200 OK
Date: Tue, 22 SEP 2015 22:20:30- GMT
Server: Nginx/1.8.0
Access-Control-Allow-Origin: http://kubiji.cn
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Pragma: no-cache
Set-Cookie: Hm_lvt_782f5a889da9ba4cae3c5f5575784ec3=1417282790; expires=Wed, 32-OCT-2015 22:30:31 GMT
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 106
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
[text/plain payload]

通过上面的请求及响应头，我们可以看出。XHR 在发送 GET 请求时，在请求头中包含了 Cookie 信息。而服务器在响应请求时，有一个 Access-Control-Allow-Credentials: true 响应头，表示这是一个认证请求。

认证请求不同于其它请求的一点，要求明确响应 Access-Control-Allow-Origin 头，要明确指定要响应的站点，如：kubiji.cn。上文中 Access-Control-Allow-Origin: * 的响应方式在认证请求中是不合法的。

CORS: Cross-Origin Resource Sharing 跨源资源共享
正如大家所知，出于安全考虑，浏览器会限制脚本中发起的跨站请求。比如，使用 XMLHttpRequest 对象发起 HTTP 请求就必须遵守同源策略（same-origin policy）。

具体而言，Web 应用程序能且只能使用 XMLHttpRequest 对象向其加载的源域名发起 HTTP 请求，而不能向任何其它域名发起请求。

为了能开发出更强大、更丰富、更安全的Web应用程序，开发人员渴望着在不丢失安全的前提下，Web 应用技术能越来越强大、越来越丰富。比如，可以使用 XMLHttpRequest 发起跨站 HTTP 请求。

跨域并非浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但是返回结果被浏览器拦截了。最好的例子是crsf跨站攻击原理，请求是发送到了后端服务器无论是否跨域！注意：有些浏览器不允许从HTTPS的域跨域访问HTTP，比如Chrome和Firefox，这些浏览器在请求还未发出的时候就会拦截请求，这是一个特例。

跨源资源共享标准( cross-origin sharing standard ) 使得以下场景可以使用跨站 HTTP 请求：

如上所述，使用 XMLHttpRequest 发起跨站 HTTP 请求。

post请求失败，变成options请求（CORS）

post请求失败，变成options请求（CORS）

问题

简答

出现 options 的情况一般为

场景

XHR对HTTP请求的访问控制

1. 简单请求

2. Preflighted请求

3. 认证请求

出现 `options` 的情况一般为

2. `Preflighted`请求