什么是跨源资源共享?

跨源资源共享 (CORS) 是一种集成应用程序的机制。CORS 定义在一个域中加载的客户端 Web 应用程序与另一个域中的资源交互的方式。这种机制很有用,因为复杂的应用程序通常会在其客户端代码中引用第三方 API 和资源。例如,您的应用程序可能使用浏览器从视频平台 API 提取视频,使用公共字体库中的字体,或显示来自国家天气数据库的天气数据。CORS 允许客户端浏览器在传输任何数据之前向第三方服务器检查请求是否获得授权。

为什么跨源资源共享很重要?

过去,在互联网技术刚刚出现的时候,跨站请求伪造 (CSRF) 的问题时有发生。这些问题将虚假的客户端请求从受害者的浏览器发送到另一个应用程序。

例如,受害者登录了其银行的应用程序。然后,他们被诱骗在新的浏览器选项卡上加载外部网站。然后,外部网站使用受害者的 Cookie 凭证并将数据中继到银行应用程序,同时假装自己是受害者。然后,未经授权的用户就可以意外访问银行应用程序。

为了防止此类 CSRF 问题,所有浏览器现在都实施同源策略。

同源策略

如今,浏览器强制要求客户端只能向与客户端 URL 具有相同来源的资源发送请求。客户端 URL 的协议、端口和主机名都应与其请求的服务器相匹配。

例如,考虑以下 URL 与客户端 URL http://store.aws.com/dir/page.html 的来源比较。

URL

结果

原因

http://store.aws.com/dir2/new.html

来源相同

只有路径不同

http://store.aws.com/dir/inner/other.html        

来源相同

只有路径不同

https://store.aws.com/page.html

来源不同      

协议不同

http://store.aws.com:81/dir/page.html

来源不同

端口不同(默认情况下,http:// 的端口号为 80)

http://news.aws.com/dir/page.html

来源不同

主机不同

因此,对于真正的用例来说,同源策略非常安全,但却不够灵活。

跨源资源共享 (CORS) 是同源策略的扩展。您需要它来与外部第三方共享授权的资源。例如,当您想从公共或授权的外部 API 中提取数据时,就需要 CORS。如果您想允许授权的第三方访问您自己的服务器资源,也需要 CORS。

跨源资源共享的工作原理

在标准互联网通信中,您的浏览器向应用程序服务器发送 HTTP 请求,以 HTTP 响应的形式接收数据,然后显示数据。在浏览器术语中,当前浏览器 URL 被称为当前来源,而第三方 URL 则是跨源的。

当您发出跨源请求时,请求-响应过程如下:

  1. 浏览器在请求中添加来源标头,其中包含有关当前来源的协议、主机和端口的信息
  2. 服务器检查当前来源标头,然后使用请求的数据和 Access-Control-Allow-Origin 标头进行响应
  3. 浏览器查看访问控制请求标头并与客户端应用程序共享返回的数据

或者,如果服务器不想允许跨源访问,则会回复一则错误消息。

跨源资源共享示例

例如,假设有一个名为 https://news.example.com 的网站。该网站希望通过 partner-api.com 的 API 访问资源。

https://partner-api.com 的开发人员首先通过将 new.example.com 添加到允许的来源列表中,在服务器上配置跨源资源共享 (CORS) 标头。他们通过在服务器配置文件中添加以下行来做到这一点。

Access-Control-Allow-Origin: https://news.example.com

配置 CORS 访问权限后,news.example.com 可以从 partner-api.com 申请资源。对于每一项请求,partner-api.com 都会回复 Access-Control-Allow-Credentials : "true." 然后,浏览器知道通信已获得授权并允许跨域访问。

如果您想授予对多个来源的访问权限,请使用逗号分隔的列表或通配符(如 *)向所有人授予访问权限。

什么是 CORS 预检请求?

在 HTTP 中,请求方法是客户端希望服务器执行的数据操作。常用的 HTTP 方法包括 GETPOSTPUTDELETE

在常规的跨源资源共享 (CORS) 交互中,浏览器会同时发送请求和访问控制标头。这些请求通常是 GET 数据请求,被认为是低风险的。

但是,有些 HTTP 请求被认为很复杂,需要服务器确认才能发送实际请求。这个预先批准过程被称为预检请求

复杂的跨源请求

如果跨源请求使用以下任何一项,则会很复杂:

  • GETPOSTHEAD 以外的方法
  • Accept-Language、Accept 或 Content-Language 以外的标头
  • multipart/form-dataapplication/x-www-form-urlencodedtext/plain 以外的内容类型标头

因此,例如,删除或修改现有数据的请求被认为是复杂的。

预检请求的工作原理

如果需要,浏览器会创建预检请求。这是一个 OPTIONS 请求,如下所示。

OPTIONS /data HTTP/1.1

Origin: https://example.com

Access-Control-Request-Method: DELETE

浏览器在实际请求消息之前发送预检请求。服务器必须使用服务器愿意从客户端 URL 接受的跨源请求的相关信息来响应预检请求。服务器响应标头必须包含以下内容:

  • Access-Control-Allow-Methods
  • Access-Control-Allow-Headers
  • Access-Control-Allow-Origin

下面给出了服务器响应示例。

HTTP/1.1 200 OK

Access-Control-Allow-Headers: Content-Type

Access-Control-Allow-Origin: https://news.example.com

Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS

预检响应有时会另外包含 Access-Control-Max-Age 标头。该指标为浏览器指定在其中缓存预检结果的持续时间(以秒为单位)。缓存允许浏览器在预检请求之间发送多个复杂的请求。在 max-age 指定的时间结束之前,它不必再次发送预检请求。

 

CORS 与 JSONP 之间有什么区别?

JSON with Padding (JSONP) 是一项历史悠久的技术,这项技术允许在不同域上运行的 Web 应用程序相互通信。

使用 JSONP,可以在客户端页面中使用 HTML 脚本标签。脚本标签可以加载外部 JavaScript 文件或直接在 HTML 页面中嵌入 JavaScript 代码。由于脚本不受同源策略的约束,因此您可以通过 JavaScript 代码检索跨源数据。

但是,数据必须采用 JSON 格式。此外,JSONP 不如跨源资源共享 (CORS) 安全,因为它依赖外部域的可信度来提供安全数据。

现代浏览器增加了一些安全功能,因此包含 JSONP 的旧代码将不再适用于此类浏览器。CORS 是现行的跨源访问控制全球 Web 标准。

阅读有关 JavaScript 的信息 »

了解 JSON »

CORS 的最佳实践有哪些?

在服务器上配置跨源资源共享 (CORS) 时,应注意以下几点。

定义合适的访问权限列表

最好使用逗号分隔列表来授予对单个域的访问权限。除非您想公开 API,否则请避免使用通配符。如若不然,使用通配符和正则表达式可能会产生漏洞。

例如,假设您编写了一个正则表达式,该正则表达式授予对所有后缀为 permitted-website.com 的网站的访问权限。通过一个表达式即可授予对 api.permitted-website.comnews.permitted-website.com 的访问权限。但是,您也无意中授予了对未经授权的网站的访问权限,这些网站可能使用诸如 maliciouspermitted-website.com 之类的域名。

避免在列表中使用 null 来源

对于某些场景,例如文件请求或来自本地主机的请求,某些浏览器会在请求标头中发送 null 值。

但是,您不应在访问权限列表中包含 null 值。这样也会带来安全风险,因为包含 null 标头的未经授权的请求可能会获得访问权限。

AWS 如何支持您的 CORS 需求?

我们的许多服务都内置了跨源资源共享 (CORS) 支持。因此,您可以控制对 Amazon Web Services (AWS) 托管的 API 和资源的跨域访问。

以下是一些支持 CORS 的 AWS 服务:

  • Amazon Simple Storage Service (Amazon S3) 是一种对象存储服务,为所有数据存储用例提供经济实惠的存储类别。Amazon S3 允许您创建 CORS 配置文档,其中包含用于识别允许访问 S3 数据的来源、每个来源支持的操作(HTTP 方法)以及其他特定于操作的信息的规则。您最多可以向配置中添加 100 条规则。
  • Amazon API Gateway 是一种完全托管的服务,可以帮助您轻松创建、发布、维护、监控和保护任意规模的 API。您可以直接在 Amazon API Gateway 控制台中为您的 REST API 一键启用 CORS。

立即创建账户,开始在 AWS 上使用 API。

AWS 上的后续步骤

查看其他与产品相关的资源
查看应用程序集成服务 
注册免费账户

立即享受 AWS 免费套餐。

注册 
开始在控制台中构建

在 AWS 管理控制台中开始构建。

登录