HTTP访问控制（CORS）

简单请求

触发简单请求

某些请求不会触发 CORS 预检请求。本文称这样的请求为“简单请求”，请注意，该术语并不属于 Fetch （其中定义了 CORS）规范。若请求满足所有下述条件，则该请求可视为“简单请求”：

• 使用下列方法之一：
  • GET
  • HEAD
  • POST
• Fetch 规范定义了对 CORS 安全的首部字段集合，不得人为设置该集合之外的其他首部字段。该集合为：
  • Accept
  • Accept - Language
  • Content - Language
  • Content - Type （需要注意额外的限制）
  • DPR
  • Downlink
  • Save - Data
  • Viewport - Width
  • Width
• Content - Type 的值仅限于下列三者之一：
  • text / plain
  • multipart / form - data
  • application / x - www - form - urlencoded
• 请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。
• 请求中没有使用 ReadableStream 对象。

请求过程

1. 客户端发送带有origin首部字段的request
2. 客户端返回带有Access-Control-Allow-Origin首部字段的response
3. 如果origin和Access-Control-Allow-Origin相等或者Access-Control-Allow-Origin是否为*,则可以正常访问；反之浏览器将会报错

预检请求

触发预检请求

与前述简单请求不同，“需预检的请求”要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。

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

• 使用了下面任一 HTTP 方法：
  • PUT
  • DELETE
  • CONNECT
  • OPTIONS
  • TRACE
  • PATCH
• 人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。该集合为：
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type (but note the additional requirements below)
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
• Content-Type 的值不属于下列之一:
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
• 请求中的XMLHttpRequestUpload 对象注册了任意多个事件监听器。
• 请求中使用了ReadableStream对象。

请求过程

1. 浏览器发送一个OPTIONS请求，询问服务器是否支持origin、Access-Control-Request-Method、Access-Control-Request-Headers
2. 服务器返回一个response，包含如下header

   Access-Control-Allow-Origin: http://foo.example
   //表明服务器支持的origin
   Access-Control-Allow-Methods: POST, GET, OPTIONS
   //表明服务器允许客户端使用 POST, GET 和 OPTIONS 方法发起请求
   Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
   //表明服务器允许请求中携带字段 X-PINGOTHER 与 Content-Type
   Access-Control-Max-Age: 86400
   //表明该响应的有效时间为 86400 秒，也就是 24 小时。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。
   

withCredentials

对于跨域 XMLHttpRequest 或 Fetch 请求，浏览器不会发送身份凭证信息。如果要发送凭证信息，需要设置 XMLHttpRequest 的某个特殊标志位。
如果服务器端的响应中未携带 Access-Control-Allow-Credentials: true ，浏览器将不会把响应内容返回给请求的发送者。

对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“”。
这是因为请求的首部中携带了 Cookie 信息，如果 Access-Control-Allow-Origin 的值为“”，请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 http://foo.example，则请求将成功执行。
另外，响应首部中也携带了 Set-Cookie 字段，尝试对 Cookie 进行修改。如果操作失败，将会抛出异常。

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