关于cors:跨域资源共享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) 是什么？）