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 : 在正式请求中会携带的头信息
