发布日期：2018 年 11 月 5 日
浏览器的同源政策会阻止读取来自不同来源的资源。此机制可阻止恶意网站读取其他网站的数据，但也会阻止合法使用。
现代 Web 应用通常需要从不同来源获取资源，例如从不同网域检索 JSON 数据，或将其他网站的图片加载到 <canvas> 元素中。这些资源可能是公开资源，应供任何人读取，但同源政策会阻止使用这些资源。开发者过去一直使用
JSONP等变通方法。
跨源资源共享 (CORS) 以标准化方式解决了此问题。 启用 CORS 后，服务器可以告知浏览器可以使用其他来源。
Web 上的资源请求是如何运作的？
浏览器和服务器可以使用超文本传输协议 (HTTP) 通过网络交换数据。HTTP 定义了请求者和响应者之间的通信规则，包括获取资源所需的信息。
HTTP 标头用于协商客户端和服务器之间的消息交换，并用于确定访问权限。浏览器的请求和 服务器的响应消息都分为标头和正文两部分。
标头
有关消息的信息，例如消息的类型或消息的编码。标头可以包含以键值对形式表示的 各种信息 。请求标头和响应标头包含不同的信息。
请求标头示例
Accept: text/html
Cookie: Version=1
此标头相当于说“我希望收到 HTML 格式的响应。这是我拥有的 Cookie。”
响应标头示例
Content-Encoding: gzip
Cache-Control: no-store
此标头相当于说“此响应中的数据采用 gzip 编码。请勿缓存此数据。”
正文
消息本身。可以是纯文本、图片二进制文件、JSON、HTML 或许多其他格式。
CORS 的运作方式
同源政策会告知浏览器阻止跨源请求。当您需要来自不同来源的公开资源时，提供资源的服务器会告知浏览器，发送请求的来源可以访问其资源。浏览器会记住这一点，并允许该资源的跨源资源共享。
第 1 步：客户端（浏览器）请求
当浏览器发出跨源请求时，浏览器会添加一个 Origin 标头，其中包含当前来源（架构、主机和端口）。
第 2 步：服务器响应
当服务器看到此标头并想要允许访问时，它会在响应中添加一个 Access-Control-Allow-Origin 标头，以指定请求来源（或使用 * 允许任何来源）。
第 3 步：浏览器收到响应
当浏览器看到包含相应 Access-Control-Allow-Origin 标头的响应时，它会与客户端网站共享响应数据。
使用 CORS 共享凭据
出于隐私考虑，CORS 通常用于匿名请求，即请求者未被识别。如果您想在使用 CORS 时发送 Cookie（可以识别发送者），则需要在请求和响应中添加其他标头。
请求
将 credentials: 'include' 添加到提取选项，如以下示例所示。
这会将 Cookie 包含在请求中，如下所示：
fetch('https://example.com', {
mode: 'cors',
credentials: 'include'
})
响应
Access-Control-Allow-Origin 必须设置为特定来源（不能使用 * 通配符），并且 Access-Control-Allow-Credentials 必须设置为 true。
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true
针对复杂 HTTP 调用的预检请求
当 Web 应用发出复杂的 HTTP 请求时，浏览器会在请求链的开头添加一个 预检请求 。
CORS 规范将复杂请求 定义如下：
- 使用 GET、POST 或 HEAD 以外的方法的请求。
- 包含
Accept、Accept-Language或Content-Language以外的标头的请求。 - 具有
Content-Type标头（不是application/x-www-form-urlencoded、multipart/form-data或text/plain）的请求。
浏览器会自动创建任何必要的预检请求，并在实际请求消息之前发送这些请求。预检请求是一个 OPTIONS 请求，如以下示例所示：
OPTIONS /data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: DELETE
在服务器端，接收请求的应用会响应预检请求，并提供有关应用接受来自此来源的方法的信息：
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS
服务器响应还可以包含 Access-Control-Max-Age 标头，以指定缓存预检结果的持续时间（以秒为单位）。这样，客户端就可以发送多个复杂请求，而无需重复预检请求。