跨源资源共享 (CORS)

安全地共享跨源资源

Mariko Kosaka
X

浏览器的同源政策会阻止从其他来源读取资源。这种机制可以阻止恶意网站读取其他网站的数据，但也阻止了合法的使用。

现代 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 以外的标头的请求。
  • 请求具有 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 以外的 Content-Type 标头。

浏览器会自动创建所有必要的预飞行请求，并在实际请求消息之前发送这些请求。预检请求是 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 标头，以指定缓存预检结果的时长（以秒为单位）。这样，客户端就可以发送多个复杂请求，而无需重复预检请求。