CORS跨域原理

CORS跨域

• 环境：IE10以上及其他浏览器
  
  1. 整个CORS通信过程，都是浏览器自动完成，客户端不用设置，服务器段需要设置Access-Control-Allow-Origin

请求
GET /cors HTTP/1.1
Origin: http://xxx.xxx.com
Host: api.millions.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

响应
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:https://xxx.xxx.com

1. 对于非简单请求put和delete，Content-Type为application/json，浏览器会先发送options的预检（preflight）请求
2. 预捡请求

Request Method:OPTIONS
Accept-Language:zh-CN,en;q=0.8,zh;q=0.6
Access-Control-Request-Method:GET
Origin:https://xxx.xxx.com

预捡响应
Request Method:OPTIONS
Status Code:204 No Content
Access-Control-Allow-Credentials:true
Access-Control-Allow-Methods:GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Origin:https://xxx-xxx.com

1. 服务器短设置允许跨域后，response中会返回Access-Control-Allow-Origin，否则会报错，可用XMLHttpRequest的onerror捕获
   
   • 几个注意的字段
2. Origin 请求源，浏览器自动添加
3. Access-Control-Allow-Credentials 布尔值，请求中是否包含cookie

与JSONP的比较

JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
- 对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“*”。
这是因为请求的首部中携带了 Cookie 信息，如果 Access-Control-Allow-Origin 的值为“*”，请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 http://yoo.example，则请求将成功执行。

HTTP 响应首部字段

• 允许客户端访问更多的响应头信息：Access-Control-Expose-Headers
  在跨域访问时，XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头，Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置本响应头。
  Access-Control-Expose-Headers 头让服务器把允许浏览器访问的头放入白名单，例如：
  Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
  这样浏览器就能够通过getResponseHeader访问X-My-Custom-Header和 X-Another-Custom-Header 响应头了。
• 指定了preflight请求的结果能够被缓存多久

- Access-Control-Max-Age: 86400

• 允许浏览器读取 response
Access-Control-Allow-Credentials 头指定了当浏览器的credentials设置为true时是允许浏览器读取response的内容。
• 实际请求中允许携带的首部字段。
  Access-Control-Allow-Headers首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。

HTTP 请求首部字段（这些首部字段无须手动设置

• Origin 首部字段表明预检请求或实际请求的源站。它不包含任何路径信息，只是服务器名称。注意，不管是否为跨域请求，ORIGIN 字段总是被发送。
  Origin: <origin>
• Access-Control-Request-Method
  Access-Control-Request-Method 首部字段用于预检请求。其作用是，将实际请求所使用的 HTTP 方法告诉服务器。
• Access-Control-Request-Headers
  Access-Control-Request-Headers 首部字段用于预检请求。其作用是，将实际请求所携带的首部字段告诉服务器。

Access-Control-Request-Headers: <field-name>[, <field-name>]