HTTP跨域值CORS

2019-07-17

简单请求

只使用 GET, HEAD 或者 POST 请求方法。如果使用 POST 向服务器端传送数据，则数据类型(Content-Type)只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一种
不会使用自定义请求头（类似于 X-Modified 这种）

预请求

不同于上面讨论的简单请求，“预请求”要求必须先发送一个 OPTIONS 请求给目的站点，来查明这个跨站请求对于目的站点是不是安全可接受的。这样做，是因为跨站请求可能会对目的站点的数据造成破坏。当请求具备以下条件，就会被当成预请求处理：

请求以 GET, HEAD 或者 POST 以外的方法发起请求。或者，使用 POST，但请求数据为 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的数据类型。比如说，用 POST 发送数据类型为 application/xml 或者 text/xml 的 XML 数据的请求。
使用自定义请求头（比如添加诸如 X-PINGOTHER）
Note: 从Gecko 2.0开始，text/plain, application/x-www-form-urlencoded 和 multipart/form-data 类型的数据都可以直接用于跨站请求，而不需要先发起“预请求”了。之前，只有 text/plain 可以不用先发起“预请求”，进行跨站请求。

附带凭证信息的请求

XMLHttpRequest和访问控制功能，最有趣的特性就是，发送凭证请求（HTTP Cookies和验证信息）的功能。一般而言，对于跨站请求，浏览器是不会发送凭证信息的。但如果将XMLHttpRequest的一个特殊标志位设置为true，浏览器就将允许该请求的发送。

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/credentialed-content/';
   function callOtherDomain(){
      if(invocation) {
        invocation.open('GET', url, true);
        invocation.withCredentials = true; ajax请求必须要设置这个
        invocation.onreadystatechange = handler;
        invocation.send();
      }

如上示例，第六行代码将XMLHttpRequest的withCredentials标志设置为true，从而使得Cookies可以随着请求发送。因为这是一个简单的GET请求，所以浏览器不会发送一个“预请求”。但是，如果服务器端的响应中，如果没有返回Access-Control-Allow-Credentials: true的响应头，那么浏览器将不会把响应结果传递给发出请求的脚本程序，以保证信息的安全。

Access-Control-Max-Age

Access-Control-Max-Age:

这个头告诉我们这次预请求的结果的有效期是多久,delta-seconds 参数表示,允许这个预请求的参数缓存的秒数,在此期间,不用发出另一条预检请求.

Access-Control-Allow-Origin

Access-Control-Allow-Origin: | *

origin参数指定一个允许向该服务器提交请求的URI.对于一个不带有credentials的请求,可以指定为’‘,表示允许来自所有域的请求.对于带有credentials的请求，不能指定为，必须为一个确定的域.
例：nginx配置

proxy_hide_header ‘Access-Control-Allow-Origin’;
add_header ‘Access-Control-Allow-Origin’ ‘http://192.168.75.124:8000';

Access-Control-Allow-Credentials

Access-Control-Allow-Credentials: true | false

告知客户端,当请求的credientials属性是true的时候,响应是否可以被得到.当它作为预请求的响应的一部分时,它用来告知实际的请求是否使用了credentials.注意,简单的GET请求不会预检,所以如果一个请求是为了得到一个带有credentials的资源,而响应里又没有Access-Control-Allow-Credentials头信息,那么说明这个响应被忽略了.

Access-Control-Allow-Methods

Access-Control-Allow-Methods: [, ]*

指明资源可以被请求的方式有哪些(一个或者多个). 这个响应头信息在客户端发出预检请求的时候会被返回.
例：nginx配置

proxy_hide_header ‘Access-Control-Allow-Methods’;
add_header ‘Access-Control-Allow-Methods’ ‘GET,POST,DELETE,OPTIONS’;

Access-Control-Allow-Headers

Access-Control-Allow-Headers: X-PINGOTHER

在响应预检请求的时候使用.用来指明在实际的请求中,可以使用哪些自定义HTTP请求头.即指定服务器可以接受那些客户端自定义header，也即客户端可以向服务器发送那些自定义header.
例：nginx配置

proxy_hide_header ‘Access-Control-Allow-Headers’;
add_header ‘Access-Control-Allow-Headers’ ‘Origin, X-Requested-With, Content-Type, Accept, Cookie, Set-Cookie’;

Access-Control-Expose-Headers

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

设置浏览器允许访问的服务器的头信息的白名单.这样, X-My-Custom-Header 和 X-Another-Custom-Header这两个头信息,都可以被浏览器得到.即值指定浏览器可以读取那些服务器返回的header.

总结

简单的跨域访问

add_header ‘Access-Control-Allow-Origin’ ‘*’

如果需要传递cookie，即附带凭证信息的请求
客户端处理，需要设置withCredentials 为true

普通AJAX请求

   var invocation = new XMLHttpRequest();
    var url = 'http://bar.other/resources/credentialed-content/';
    function callOtherDomain(){
      if(invocation) {
        invocation.open('GET', url, true);

        invocation.withCredentials = true; //ajax请求必须要设置这个

        invocation.onreadystatechange = handler;
        invocation.send();
      }

Jquery模式

$.ajax({
   url: a_cross_domain_url,
   // 将XHR对象的withCredentials设为true
   xhrFields:{
    withCredentials:true
   }});

angularJs模式

1	$httpProvider.defaults.withCredentials = true

服务器端处理

1 2	add_header 'Access-Control-Allow-Origin' 'http://192.168.75.107:8000'; //不能用 * add_header 'Access-Control-Allow-Credentials' 'true';

如果需要服务器接收自定义header

服务器端处理

1	add_header 'Access-Control-Allow-Headers' 'bbsrandom, sessionId';

如果需要浏览器接收自定义header

服务器端处理

1	add_header 'Access-Control-Expose-Headers' 'bbsrandom, sessionId';

文章参考自 https://developer.mozilla.org/zhCN/docs/Web/HTTP/Access_control_CORS