CORS (Cross-Origin Resource Sharing) 跨域资源共享

为什么需要 CORS

首先，跨域指的是同一个域名下的资源，同时要注意域名与子域名，比如 developers.e.qq.com 和 developers.proxy.qq.com 不属于同一个域，同样属于跨域访问

由于 同源策略，浏览器会限制脚本中发起的跨域请求，比如通过 XMLHttpRequest 就不能发起的跨域请求

PS: 不是不能发跨域请求，而是跨域请求可以正常发起，只不过浏览器会拦截返回结果

虽然有一些 jsonp 这些请求方式，不过都只是利用了一些标签的可跨域性解决的，实质上已经不属于 XMLHttpRequest 的范围了

为了能开发出更强大、更丰富、更安全的 Web 应用程序，能够在不丢失安全的前提下，Web 应用技术能越来越强大、越来越丰富。比如，可以使用 XMLHttpRequest 发起跨域 HTTP 请求，于是就产生了一种新的机制，即 跨域资源共享(Cross-Origin Resource Sharing (CORS))

这种机制让 Web 应用服务器能支持跨域访问控制，从而使得安全地进行跨域数据传输成为可能

需要注意的是，浏览器必须能够支持这种新的访问机制，包括请求头和策略执行。同样，服务器端则需要解析这些新的请求头，并按照策略返回相应的响应头以及所请求的资源

在说 CORS 之前，我们先来弄清两个概念，请求与预请求

请求就不用多说，就是正常的 HTTP 请求

预请求

首先，发送的请求要满足以下条件

请求以 GET, HEAD 或者 POST 以外的方法发起请求

如果使用 POST 的话，请求的 Content-Type 必须是 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的数据类型。比如，POST 发送的 Content-Type 为 application/xml 或者 text/xml

使用自定义请求头(比如: X-TEST)

当请求包含这几种特征时，该请求会先发出一个 预请求，以 OPTIONS 的方式对服务器先请求，当保证满足 CORS 约定的条件时，才会发出正式的请求

简单来说，预请求 就是为了保证服务器能够支持跨域访问，保证整个过程的访问安全

CORS 请求过程

ok，接下来我们来说如何通过 CORS 进行跨域访问，这里我们用 jquery 的 $.ajax() 的方法请求

首先，我们通过 预请求 的方式来确定服务器是否支持跨域

$.ajax({

url: 'http://developers.proxy.e.qq.com/cors.php',

method: 'POST',

'Content-Type': 'application/json',

headers: {

'X-TEST': 'test',

},

success: function(data) {

console.log(data);

}

});

下面是 预请求 的请求头信息和响应头信息

// request headers

OPTIONS /cors.php HTTP/1.1

Host: developers.proxy.e.qq.com

Connection: keep-alive

Cache-Control: max-age=0

Access-Control-Request-Method: POST

Origin: http://localhost

User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 > Safari/537.36

Access-Control-Request-Headers: accept, x-test

Accept: /

Referer: http://localhost/example/index.php

Accept-Encoding: gzip, deflate, sdch

Accept-Language: zh-CN,zh;q=0.8

// response headers

HTTP/1.1 200 OK

Date: Fri, 19 Aug 2016 03:32:18 GMT

Server: Apache

Access-Control-Allow-Origin: http://localhost

Access-Control-Allow-Methods: POST, GET, OPTIONS

Access-Control-Allow-Headers: X-TEST

Access-Control-Max-Age: 86400

Cache-Control: max-age=0

Expires: Fri, 19 Aug 2016 03:32:18 GMT

Vary: Accept-Encoding

Content-Encoding: gzip

Content-Length: 23

Connection: close

Content-Type: text/html

在这里我们可以看到，预请求 的请求头信息中有 Access-Control-Request-Headers: accept, x-test 和 Access-Control-Request-Method: POST 这两个头信息

Access-Control-Request-Headers：头信息会告诉服务器，正式请求将会携带 accept、x-test 两个请求头信息

Access-Control-Request-Method：头信息则告诉服务器，正式请求将会以 POST 的方式发起

然后服务器的响应头信息里面

Access-Control-Allow-Headers : 告诉我们接受 X-TEST 这个自定义的 header 头

Access-Control-Allow-Methods : 服务器接受的方法 POST, GET, OPTIONS

Access-Control-Allow-Origin : 允许跨域访问的域名列表，这里是 localhost

Access-Control-Max-Age : 本次 预请求 的响应结果有效时间是多久，这里 86400 秒表示一天内，浏览器在处理针对该服务器的跨站请求，都可以无需再发送预请求

请求头里面的信息会和响应头信息里面的内容进行核对，如果条件都满足的话，预请求完成

然后 预请求 结束，结果表明支持跨域访问，并且现在的域名也在跨域访问的列表内，确认信息后，接下来会进行正式的请求

下面是正式请求的请求头信息和响应头信息

// request headers

POST /cors.php HTTP/1.1

Host: developers.proxy.e.qq.com

Connection: keep-alive

Content-Length: 0

Cache-Control: max-age=0

Accept: /

X-TEST: test

User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 > Safari/537.36

Origin: http://localhost

Referer: http://localhost/example/index.php

Accept-Encoding: gzip, deflate

Accept-Language: zh-CN,zh;q=0.8

// response headers

HTTP/1.1 200 OK

Date: Fri, 19 Aug 2016 03:32:18 GMT

Server: Apache

Access-Control-Allow-Origin: http://localhost

Access-Control-Allow-Methods: POST, GET, OPTIONS

Access-Control-Allow-Headers: X-TEST

Access-Control-Max-Age: 86400

Cache-Control: max-age=0

Expires: Fri, 19 Aug 2016 03:32:18 GMT

Vary: Accept-Encoding

Content-Encoding: gzip

Content-Length: 23

Connection: close

Content-Type: text/html

这样就完成了一次 CORS 的跨域请求过程

注意：服务器端也要做响应的配置，如下示例：

// PHP 为例

header('Access-Control-Allow-Origin: http://localhost');

header('Access-Control-Allow-Methods: POST, GET, OPTIONS');

header('Access-Control-Allow-Headers: X-TEST');

header('Access-Control-Max-Age: 0');

携带 Cookies 的请求

需要再 xhr 里面设置 withCredentials: true

同时服务器上面要设置返回的响应头信息 Access-Control-Allow-Credentials: true，否则不会返回响应结果以保证信息的安全

$.ajax({

url: 'http://developers.proxy.e.qq.com/cors.php',

method: 'POST',

'Content-Type': 'text/plain',

xhrFields: {

withCredentials: true,

},

headers: {

'X-TEST': 'test',

},

success: function(data) {

console.log(data);

}

});

对应的，服务器上要加上：

// PHP 为例

header('Access-Control-Allow-Credentials: true');

下面我们来列举整个过程涉及到的响应头信息和请求头信息

HTTP 响应头

Access-Control-Expose-Headers : 允许访问服务器的头信息的白名单

Access-Control-Allow-Origin : 允许跨域访问的域名白名单

Access-Control-Allow-Methods : 允许跨域访问的 Method

Access-Control-Allow-Headers : 跨域访问时可以使用的自定义的 HTTP 请求头

Access-Control-Max-Age : 本次预请求结果的有效期，在这个时间内不需要再次预请求

Access-Control-Allow-Credentials : 当为 true 时，表明本次请求是携带 Cookies 的请求

HTTP 请求头

Origin : 发送请求或是预请求的域名

Access-Control-Request-Method : 在正式请求中会使用的 Method

Access-Control-Request-Headers : 在正式请求中会携带的头信息