浅谈CORS
浅谈CORS
CORS全称“跨站资源共享”（Cross-Origin Resource Sharing），它允许浏览器克服浏览器同源策略向跨域服务器发出请求。
同源策略
概念
说到CORS，那么就不得不提浏览器同源策略，所谓“同源”，是指服务器URL的三个相同：
1.协议相同
2.域名相同
3.端口相同
举个栗子：比如一个URL是http://www.example.com:80/a.html，那么：
http://www.example.com:80/b.html // 同源
https://www.example.com:80/a.html // 非同源(协议不同)
http://www.example1.com:80/a.html // 非同源(域名不同)
http://www.example.com:81/a.html // 非同源(端口不同)
限制
如果非同源，那么三种行为将受到限制：
1.非同源页面无法跨域读取浏览器本地数据存储（Cookie、LocalStorage和IndexDB）
2.非同源页面无法跨域获取DOM
3.非同源页面无法跨域发送AJAX请求
目的
那么，为什么浏览器要使用同源策略？
同源策略的目的，是为了保证用户的信息安全，防止被不法分子窃取数据。而众所周知，Cookie包含大量的登录信息，如果一个网页可以跨域访问另一个网站的Cookie，那么不法分子可以通过使用跨域访问获取Cookie然后冒充用户，为所欲为。
由此可见，同源策略是极其有必要的。
突破同源策略
但是，很多时候，我们需要跨域发送AJAX请求，此时我们就需要突破同源策略不允许发送跨域AJAX的规定。随着技术的发展，有很多技术可以实现跨域发送AJAX请求，常见的有以下三种：
1.JSONP
2.Websocket
3.CORS
JSONP
JSONP是CORS技术出来之前最常用的跨域解决方案，最大的特定是兼容性好，简单，不需要进行大的服务器改动。它的基本思路是通过动态添加一个script标签，向服务器请求脚本，脚本中一般调用一个客户端定义的函数，将数据作为参数，调用客户端的函数，而客户端通过操作该函数，可以使用被当做参数传过来的数据。
因为服务器不限制script的跨域，所以不受跨域影响。
Websocket
众所周知，Websocket是一个持久化协议，常用于解决服务器推送问题。但是，实际上Websocket其实支持跨域通信。通过设置Websocket的origin的字段，可以规定允许跨域的站点。
上面两种方法虽然可以解决跨域，但是，都有着各种问题。
庆幸的是，本文的主角：CORS的出现，彻底解决了跨域问题。
CORS
浏览器将跨域AJAX请求分为两类：简单请求和非简单请求，对应有两种不同的处理方式。
简单请求
何为简单请求？
简单请求就是满足以下两个条件的请求：
1.请求方法为HEAD、GET和POST
2.HTTP请求头只包含：Accept、Accept-Language、Content-Language、Last-Event-ID以及值为application/x-www-form-urlencoded、multipart/form-data、text/plain三者之一的Content-Type
对于简单请求，浏览器可以直接发送请求到服务器，但是会在请求头中添加一个origin字段，该字段用来说明请求的来源。服务器会识别该字段，判断是否允许跨域。
如果允许跨域，服务器会返回结果并在响应头上添加三个字段：
1.Access-Control-Allow-Origin
该字段的值为Origin字段的值，或者是*，表示服务器接受任何源的跨域请求。
2.Access-Control-Allow-Credentials
可选字段，它表示是否允许发送Cookie，值为true时，表示发送请求的时候允许发送Cookie，如果不包含该字段，则表示不允许发送Cookie。
值得一提的是，如果服务器允许发送Cookie，那么不允许将Access-Control-Allow-Origin的值设为*。
3.Access-Control-Expose-Headers
可选字段，在没有该字段的情况下，针对跨域请求，XHR对象的getResponseHeader()方法只能拿到Cache-Control、Content-Language、Content-Type、Expire、Last-Modified、Pragma这六个字段，该字段可以设置额外可以拿到的字段。
非简单请求
不满足简单请求的跨域请求都是非简单请求，比如PUT或DELETE方法。
不同于简单请求的直接向服务器请求，非简单请求会在发送之前，先进行一次“预检”（preflight），即，向服务器发出一个OPTIONS请求，查询服务器是否允许它进行跨域请求。
如果服务器不通过“预检”，会返回一个error，客户端可以通过onerror事件进行捕获。
当服务器通过“预检”后，服务器会进行响应，响应头中含有CORS的相关字段，分别是：
1.Access-Control-Allow-Origin
该字段和简单请求中的同名字段一样。
2.Access-Control-Allow-Methods
该字段表示服务器支持跨域的所有方法，是一个逗号分隔的字符串，如：POST，DELETE。
3.Access-Control-Allow-Headers
该字段表示服务器支持的所有头信息，也是一个逗号分隔的字符串。
4.Access-Control-Allow-Credentials
可选字段，与简单请求中的同名字段一样。
5.Access-Control-Max-Age
可选字段，在一段时间内，浏览器对同一个域名进行非简单跨域请求，只对第一次进行“预检”，而这一次“预检”的结果将被缓存，接下来的请求都通过该结果进行判断。该字段就是用来设置“预检”结果缓存的时间长短，可以将其值设为-1来禁用“预检”缓存。
接收到服务器通过“预检”的响应后，客户端会正式发送真正的请求，接下来的处理方式和简单请求一致。
总结
在当前开发中，当不需要兼容老式浏览器中，我们一般采用CORS的方式进行跨域请求，因为相比Websocket，CORS支持非长连接场景；相比JSONP，CORS支持所有HTTP请求，用法更加平滑。
当然，值得一提的是，当你需要兼容老式浏览器时，JSONP是你唯一的选择~
