跨域资源共享(CORS)是什么？

一、CORS 是什么？

出于安全原因，浏览器会限制脚本发起的跨域 HTTP 请求，除非服务器同意访问。譬如服务器对预检请求的响应 Header 中有 Access-Control-Allow-Origin: *，那么跨域请求即可正确访问。

二、危害举例

如果恶意网页中含有这样的脚本代码 fetch("example.com")，而你已经登录了 example.com 网站还没有退出，如果此时没有 CORS 限制，那么恶意网页中的脚本代码就会顺利通过服务器执行，您的大量个人信息会被泄露。

三、预检请求是什么？

为了避免跨域请求对服务器的数据产生不可知的影响，浏览器会用 OPTIONS 方法，先发送一个预检请求（preflight request），待服务器确认可以访问后，再发送实际请求。

下面这个 POST 请求，就会先发送预见请求，可以在控制台的网络连接中查看具体连接和信息。

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/post-here/';
var body = '<?xml version="1.0"?><person><name>Arun</name></person>';

function callOtherDomain() {
    if (invocation) {
        invocation.open('POST', url, true);
        invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
        invocation.setRequestHeader('Content-Type', 'application/xml');
        invocation.onreadystatechange = handler;
        invocation.send(body);
    }
}

四、怎么用 CORS？

CORS 的工作主要在服务端，通过返回不同的 Header 来告知请求者，是否可以访问？下面两个部分列出了 CORS 所有用到的 Header 及其含义。

1、其他使用场景

CORS 可以配合 token 来防止 CSRF 攻击。详情，看这里！

五、客户端跨域请求

跨域请求用到如下 Header ，无须手动设置，浏览器会自动设置。

1、origin

• 预检请求和实际请求中的源站名称，不包含任何路径信息，只是服务器名称。

Origin: <origin>

2、Access-Control-Request-Method

• 用于预检请求，告诉服务器，实际请求 使用什么方法：post、get 等。

Access-Control-Request-Method: <method>

3、Access-Control-Request-Headers

• 用于预检请求，告诉服务器，将实际请求所携带的首部字段。

Access-Control-Request-Headers: <field-name>[, <field-name>]*

六、服务器响应跨域请求

1、Access-Control-Allow-Origin

• 用于响应预检请求，表示允许该资源的外域 URI

// 允许所有
Access-Control-Allow-Origin: *

// 只允许 http://mozilla.com
Access-Control-Allow-Origin: http://mozilla.com

2、Access-Control-Expose-Headers

• 对于自定义的 Header ，必须这里设置，客户端才能正常访问

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

3、Access-Control-Max-Age

• 设置预检请求的结果能够被缓存多少秒？

Access-Control-Max-Age: <delta-seconds>

4、Access-Control-Allow-Credentials

• 当跨域请求中设置了 credentials=true，但服务端响应中没有 Access-Control-Allow-Credentials: true，那么浏览器是不会把服务器返回的数据发回给请求者。

Access-Control-Allow-Credentials: true

5、Access-Control-Allow-Methods

• 用于响应预检请求，指明实际请求所允许使用的 HTTP 方法

Access-Control-Allow-Methods: <method>[, <method>]*

6、Access-Control-Allow-Headers

• 用于响应预检请求，指明实际请求中允许携带的 Header

Access-Control-Allow-Headers: <field-name>[, <field-name>]*

七、参考文档

• 跨域资源共享(CORS)是什么？）