
#### 概念
**跨源资源共享（Cross-Origin Resource Sharing，CORS**）是一种基于 HTTP 头的机制，该机制允许服务器指示浏览器应该允许从自身以外的其他源（域、协议和端口）加载资源。

为了安全性，浏览器限制脚本内发起的跨源请求，除非服务器返回的响应中包含正确的CORS响应头。

#### 什么时候需要CORS

- 跨源的Ajax或Fetch Api请求
- WebGL maps.
- 使用 drawImage() 方法
- CSS 中的 Shapes from images

#### CORS协议

CORS 协议由一组标头组成，这些标头指示响应是否可以 跨源共享。
对于涉及需要跨源的请求，将执行CORS 预检请求（**CORS-preflight request** ），以确保请求的当前URL支持CORS。

##### CORS 预检请求（**CORS-preflight request** ）

使用OPTIOS 方法并包含如下的请求头：


`Access-Control-Request-Method` 表示跨域请求使用的方法


`Access-Control-Request-Headers` 表示跨域请求额外携带的请求头


服务器响应：
服务器收到CORS 预检请求后需要反馈包含如下头部的响应

`Access-Control-Allow-Origin` 允许哪些源加载资源

`Access-Control-Allow-Credentials` 是否需要包含凭证信息

`Access-Control-Allow-Methods` 支持的跨源请求的方法

`Access-Control-Allow-Headers` 支持哪些响应请求

`Access-Control-Max-Age` 提供 Access-Control-Allow-Methods 和 Access-Control-Allow-Header可缓存的时间，默认 5秒

`Access-Control-Expose-Headers` 可暴露的响应头部
注：Access-Control-Expose-Headers 暴露的头部，可以通过js脚本获取到对应的值。否则无法通过js获取对应的header（即便在浏览器的network 中可以看到相关头部信息）


##### 浏览器的请求流程

![](
https://zidot.oss-cn-beijing.aliyuncs.com/assets/2022/12/CROS.png)


### 参考

https://fetch.spec.whatwg.org/#cors-protocol


跨源资源共享（Cross-Origin Resource Sharing，CORS）