跨域问题的根本解决方案CORS

介绍

关于跨域问题有不少的解决方案，这里咱们总结一下目前最通用最强大的解决方案：CORS。

W3C 的 Web 工做组推荐了一种新的机制，即跨域资源共享（Cross-origin Resource Sharing），简称CORS。其实这个机制就是实现了跨站访问控制，使得安全地进行跨站数据传输成为可能。

跨源资源共享标准( cross-origin sharing standard) 使得如下场景可使用跨站 HTTP 请求：

1. 使用 XMLHttpRequest 或 Fetch发起跨站 HTTP 请求。
2. Web 字体 (CSS 中经过 @font-face 使用跨站字体资源)，所以，网站就能够发布 TrueType 字体资源，并只容许已受权网站进行跨站调用。
3. WebGL 贴图
4. 使用drawImage绘制
5. Images/video 画面到canvas.
6. 样式表（使用 CSSOM）
7. Scripts (for unmuted exceptions)

CORS分为简单请求和复杂请求，处理方法也是有不一样的，因此咱们分别总结。

简单请求

什么是简单请求呢？同时知足如下两个条件，就是简单请求：

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

实现方法很是简单，只须要把服务器的响应报文里的Access-Control-Allow-Origin设置为*或者包含由 Origin指明的站点。

Access-Control-Allow-Origin是HTTP响应报文中的一个字段，Origin是HTTP请求报文中的以一个字段,若是不清楚这两个字段的话，能够自行查阅关于HTTP报文的知识，好比HTTP | MDN。

复杂请求

若是不是简单请求，那就是复杂请求，好比请求的方法是PUT或者DELETE，好比Content-Type字段的类型是application/json，好比设置了自定义头信息。

复杂请求就是比简单请求多了个预检请求（preflight）而已。

预检请求就是浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可使用哪些HTTP动词和头信息字段。只有获得确定答复，浏览器才会发出正式的XMLHttpRequest请求，不然就报错。

预检请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪一个源。除了Origin字段，还有两个字段很是重要：Access-Control-Request-Method和Access-Control-Request-Headers，分别表示容许的请求方法和请求头。

举一个具体的例子：

如今，咱们有一个页面向服务器发送了一个POST请求，而且咱们本身定义了一个请求头字段My-HEADER，这时候浏览器就会首先发送一个OPTION请求来作预检请求，请求头里有如下字段：

Access-Control-Request-Method: POST
Access-Control-Request-Headers: My-HEADER

若是预检请求成功的话，响应头里的内容以下：

Access-Control-Allow-Origin: http://example.com //代表服务器容许http://example.com的请求
Access-Control-Allow-Methods: POST, GET, OPTIONS //代表服务器能够接受POST, GET和 OPTIONS的请求方法
Access-Control-Allow-Headers: My-HEADER //传递一个可接受的自定义请求头列表
Access-Control-Max-Age: 3000000 //告诉浏览器，本次预检请求的响应结果有效时间是多久

总结

以上就是CORS方法解决跨域问题的流程，CORS支持全部类型的HTTP请求，是目前跨域问题的根本解决方案。