跨源资源共享 (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 以外的标头的请求。
  • 具有 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 标头，以指定缓存预检结果的时长（以秒为单位）。这样一来，客户端就可以发送多个复杂的请求，而无需重复发送预检请求。