说说跨域cros的那些事

了解跨域之前我们需要知道什么叫”同源策略“，即域名，协议，端口相同。

我们都知道之前有很多跨域方式：

1. JSOP，动态创建<script>，设置src获取跨域资源。只能GET请求。
2. 空iframe加form。可支持POST请求。
3. window.name + iframe跨域。
4. postMessage + iframe跨域。

接下来主角登场，今天我们说的是CORS（跨域资源共享）

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）

• 只要同时满足以下两大条件，就属于简单请求。

1. 请求方法是以下三种方法之一：
   HEAD
   GET
   POST
2. HTTP的头信息不超出以下几种字段：
   Accept
   Accept-Language
   Content-Language
   Last-Event-ID
   Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

• 凡是不同时满足上面两个条件，就属于非简单请求。

简单请求

实现过程
（1）后端主要设置Access-Control-Allow-Origin是允许跨域的域名，如果设置*，则表示接受任意域名的请求。
  如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。
（2）前端不需要做什么。

非简单请求

 非简单请求是请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

 非简单请求的CORS请求会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）;

 这种情况下除了设置origin，还需要设置Access-Control-Request-Method以及Access-Control-Request-Headers

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header

 Access-Control-Max-Age 该字段可选，用来指定本次预检请求的有效期，单位为秒。

• 后端

const query = ctx.request.query
    // 如果需要http请求中带上cookie，需要前后端都设置credentials，且后端设置指定的origin
ctx.set('Access-Control-Allow-Origin', 'http://localhost:9099')
ctx.set('Access-Control-Allow-Credentials', true)以及Access-Control-Request-Headers
ctx.set('Access-Control-Request-Method', 'PUT,POST,GET,DELETE,OPTIONS')
ctx.set('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, t')

• 前端
  接口请求设置headers属性

如headers: {'X-Custom-Header': 'value'}；
xhr.setRequestHeader('X-Custom-Header', 'value');

CORS优势在于支持所有类型的HTTP请求，也可支持全部跨域资源。