HTTP访问控制 - CORS

一、什么是CORS

域：在浏览器里，两个资源拥有相同的域名、协议、端口，成为同域，其中一个不同即成为跨域。
现代浏览器允许页面加载来自不同域的样式、图片、脚本、API等资源。当一个资源发出一个与其不同域的资源请求时，会发起一个跨域HTTP请求。而处于安全性考虑，浏览器会限制（或拦截）从脚本发起跨域HTTP请求。例如从XMLHttpRequest或Fetch。
跨域资源共享（Cross Origin Resource Sharing - CORS）解决了上面提到的跨域限制问题。CORS是一种规范，使用了特殊的HTTP Header来告诉浏览器是否可以跨域请求。该规范允许Web服务器进行跨域访问的安全控制，从而降低HTTP请求带来的风险。

二、什么时候会使用CORS

• XMLHttpRequest 或 Fetch 发起的跨域请求
• Web字体
• WebGL 贴图
• 使用 drawImage 将 Images/video 画面绘制到 canvas

三、基本流程

CORS除定义一些HTTP头部字段外，还要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。

四、跨域请求类型

4.1 简单请求

符合以下情况的，视为简单请求。浏览器不会发出Options预检请求。

• 使用下列方法之一：
  * GET
  * HEAD
  * POST

• Fetch 规范定义了对 CORS 安全的首部字段集合，不得人为设置该集合之外的其他首部字段。

• Content-Type 的值仅限于下列三者之一：
  * text/plain
  * multipart/form-data
  * application/x-www-form-urlencoded

简单请求示意图

DEMO： http://arunranga.com/examples/access-control/ 里 'Simple Invocation using GET' 的例子

4.2 预检请求

当请求满足下述任一条件时，即应首先发送预检请求：

• 使用了下面任一 HTTP 方法：

  • PUT
  • DELETE
  • CONNECT
  • OPTIONS
  • TRACE
  • PATCH

• 人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。

• Content-Type 的值不属于下列之一:

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

预检请求

DEMO： http://arunranga.com/examples/access-control/ 里 'PreflightedInvocation using POST' 的例子

4.3 附带身份凭证的请求

请求可以通过cookie发送身份凭证信息给服务器。请求方需要设置 withCredentials 为 true

带身份凭证的请求

NOTE： 对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“*”。

DEMO： http://arunranga.com/examples/access-control/ 里 'Credentialed Request' 的例子

五、CORS定义的头部字段

5.1 响应头部

这些字段由服务器端附加值HTTP响应头中，告诉浏览器跨域访问控制信息。

Header	值语法	说明
Access-Control-Allow-Origin	<origin> 或 *	允许被访问的具体域名，或*表示任何origin都可访问
Access-Control-Allow-Methods	<method>[, <method>]*	预检请求响应字段，指明了实际请求所允许使用的请求方法
Access-Control-Allow-Headers	<field-name>[, <field-name>]*	预检请求响应字段，指明了实际请求中允许携带的首部字段
Access-Control-Expose-Headers	X-My-Custom-Header, X-Another-Custom-Header	服务器把允许浏览器访问的头放入白名单，默认只能获取到Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma
Access-Control-Max-Age	<delta-seconds>	preflight预检请求结果被缓存多久
Access-Control-Allow-Credentials	true/false	请求是否需附带身份凭证

5.2 请求头部

Header	值语法	说明
Origin	<origin>	实际发出请求的原站域名
Access-Control-Request-Method	<method>	用于预检请求指明实际请求使用的HTTP方法
Access-Control-Request-Headers	<field-name>[, <field-name>]*	预检请求，指明了实际请求携带的首部字段

---

参考文章
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS