跨域详解（HTTP CORS）

因为同源策略的限制，想跨域需要一些特殊方法，目前跨域有多种方式CORS、jsonp、iframe等，本文主要讲解http cors。

CORS名词解释

简单请求

简单请求（Simple requests）满足以下条件就是简单请求，就不会触发预检请求。

预检请求

预检请求（Preflighted requests）会先发起methed为OPTIONS请求以获取是否允许该实际请求，如果允许再发送实际请求。

客户端

跨域请求

简单请求和预检请求一般按照正常的ajax或者fetch请求发送，但如果想携带cookie验证身份信息，需要设置withCredentials，而且服务器响应Access-Control-Allow-Origin需要指定当前页面host。

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

cookie有Domain作用域的，不同主域是无法获取cookie的，所以携带的cookie只会是请求目标服务器同域的，Cookie的作用域。

服务端

简单请求响应

可以设置以下参数

Access-Control-Allow-Origin: http://test.com // 允许域名
Access-Control-Allow-Methods: POST, GET, OPTIONS // 允许方法
Access-Control-Allow-Credentials: true // 允许浏览器读取response
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type // 自定义头部字段
Access-Control-Max-Age: 86400 // 有效时间

如果只是预检请求设置Access-Control-Allow-Origin，在实际请求后将跨域页面还是无法获取响应数据。

预检请求响应

1、 预检请求

主要设置以下参数：

Access-Control-Allow-Origin: http://test.com // 允许域名
Access-Control-Allow-Methods: POST, GET, OPTIONS // 允许方法
Access-Control-Allow-Credentials: true // 允许浏览器读取response

只有当满足响应的条件，浏览器客户端才会发起实际请求。

2、 实际请求

同简单请求