跨源资源共享 (CORS)

安全地共享跨源资源

Mariko Kosaka

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

现代 Web 应用通常需要从不同来源获取资源,例如,从其他网域检索 JSON 数据,或将来自其他网站的图片加载到 <canvas> 元素中。这些资源可能是应该供所有人阅读的公共资源,但同源政策会阻止使用这些资源。开发者过去一直使用 JSONP 等解决方法。

跨源资源共享 (CORS) 以标准化的方式解决此问题。启用 CORS 后,服务器可以告知浏览器它可以使用其他来源。

请求和响应
客户端请求和服务器响应的示意图。

浏览器和服务器可以使用超文本传输协议 (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 以外的方法的请求。
  • 包含除 AcceptAccept-LanguageContent-Language 以外的标头的请求。
  • 请求具有 application/x-www-form-urlencodedmultipart/form-datatext/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 标头,以指定缓存预检结果的时长(以秒为单位)。这样,客户端就可以发送多个复杂请求,而无需重复预检请求。