跨域资源共享 CORS 简述

阮一峰网路日志：http://www.ruanyifeng.com/blog/2016/04/cors.html

跨域资源共享 CORS 简述

跨域资源共享 CORS 解决了ajax同源使用的限制。

现在基本所有浏览器都支持跨域访问，浏览器在ajax请求跨域时自动添加一些头信息，并另外单独发一次请求。
实现CORS通信的关键是在服务器端实现CORS功能。
就是说：
1.CORS就是前端在发送ajax请求才会出现限制；
2.实现CORS，前端代码不用改，后端配置CORS接口。实现CORS，前端代码不用改，后端配置CORS接口。

CORS基本流程

简单请求：simple request
非简单请求：not-so-simple request;
简单请求特点：
1 请求方法：HEAD、GET、POST；
2 请求头信息只能存在的字段：Accept、Accept-Language、Last-Event-ID、Content-Type（只限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain）
只要同时满足以上两个特点，就是简单请求。否则就是非简单请求。

简单请求流程：

对于简单请求，浏览器直接发送CORS请求，在头信息中添加Origin字段。

Origin字段：
字段的值用来说明本次请求的来源（协议 + 域名 + 端口）。
服务器流程：
1 获取这个值
2 判断是否在许可范围内
3 False --> 返回一个正常HTTP响应。
响应头信息不会包含Access-Control-Allow-Origin字段；
浏览器在响应头内没有解析到该字段时，会抛出一个错误；
错误会被XMLHttpRequest的onerror的回调函数捕获。
注意：这种错误不能通过状态码识别，因为HTTP回应的状态码有可能是200。
回调函数：一个通过函数指针调用的函数。
4 True —> 执行5

5 服务器返回的响应，多出头信息字段：
- Access-Control-Allow-Origin: http://api.bob.com
必须有的字段，值是Origin字段的值， 或者*表示任意域名。
- Access-Control-Allow-Credentials: true
可选字段，值为bool值，True表示允许请求携带cookie。默认为False。
- Access-Control-Expose-Headers: FooBar
可选字段，XMLHttpRequest对象的getResponseHeader()方法只能
拿到6个基本字段：Cache-Control、Content-Language、
Content-Type、Expires、Last-Modified、Pragma。
如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。
- Content-Type: text/html; charset=utf-8
三个头信息都是以Access-Control-开头
withCredentials属性
CORS请求默认不发送cookie和HTTP认证。
需要发送cookie一方面需要服务器指定Access-Control-Allow-Credentials字段。
另一方面需要在ajax请求中打开withCredentials属性 设置为True。
需要发送cookie时，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。

非简单请求流程

预检请求preflight
非简单那请求：比如PUT或DELETE请求方法，或者Content-Type字段是application/json。
非简单请求的跨域请求，在正式建立通信之前，会先来一发预检请求（HTTP查询请求）。
预检请求方法是OPTIONS，浏览器自动执行。
预检请求的响应
服务器返回响应，内容为跨域请求允许范围和请求格式。

浏览器正常请求和响应
一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，
就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，
也都会有一个Access-Control-Allow-Origin头信息字段。
请求时，头信息Origin字段是浏览器自动添加。
响应时，Access-Control-Allow-Origin字段是每次必定包含的。

与JSONP

CORS与JSONP的使用目的相同，但是比JSONP更强大。
JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
http://newhtml.net/using-cors/
https://github.com/ottoyiu/django-cors-headers/