跨源资源共享 (CORS)

Mariko Kosaka

发布日期: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(可以识别发送者),则需要在请求和响应中添加其他标头。

请求