一、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.comAccess-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)是什么？）