如何解决 CloudFront 中的错误“No 'Access-Control-Allow-Origin' header is present on the requested resource”?

上次更新日期:2022 年 6 月 16 日

我在 Amazon CloudFront 中请求的资源上收到 CORS 错误“No 'Access-Control-Allow-Origin'”。为什么我会收到此错误,该如何解决?

解决方法

确认源的跨源资源共享(CORS)策略允许源返回“Access-Control-Allow-Origin”标头

注意:如果您在运行 AWS 命令行界面(AWS CLI)命令时遇到错误,请确保您使用的是最新版本的 AWS CLI

运行以下命令以确认原始服务器返回 Access-Control-Allow-Origin 标头。将 example.com 替换为所需的原始标头。将 https://www.example.net/video/call/System.generateId.dwr 替换为返回标头错误的资源的 URL。

curl -H "Origin: example.com" -v "https://www.example.net/video/call/System.generateId.dwr"

如果 CORS 策略允许原始服务器返回 Access-Control-Allow-Origin 标头,您会看到类似于以下内容的响应:

HTTP/1.1 200 OK
Server: nginx/1.10.2
Date: Mon, 01 May 2018 03:06:41 GMT
Content-Type: text/html
Content-Length: 3770
Last-Modified: Thu, 16 Mar 2017 01:50:52 GMT
Connection: keep-alive
ETag: "58c9ef7c-eba"
Access-Control-Allow-Origin:
    example.com
Accept-Ranges: bytes

如果响应中未返回 CORS 标头,则表明原始服务器未正确设置 CORS。在您的自定义源Amazon Simple Storage Service(Amazon S3)源上设置 CORS 策略。

配置 CloudFront 分配以将相应的标头转发到原始服务器

在原始服务器上设置 CORS 策略后,请配置 CloudFront 分配以将源标头转发到原始服务器。如果您的原始服务器是 Amazon S3 存储桶,则配置您的分配以将以下标头转发到 Amazon S3:

  • Access-Control-Request-Headers
  • Access-Control-Request-Method

要将标头转发到原始服务器,可以根据源类型使用 CloudFront 的两个预定义策略:CORS-S3OriginCORS-CustomOrigin

要将预定义的策略添加到分配中,请执行以下操作:

  1. CloudFront 控制台打开分配。
  2. 选择 Behaviors(行为)选项卡。
  3. 选择 Create Behavior(创建行为)。或者选择一个现有行为,然后选择 Edit(编辑)。
  4. Cache key and origin requests(缓存键和源请求)下,选择 Cache policy and origin request policy(缓存策略和源请求策略)。 然后,对于源请求策略,从下拉列表中选择 CORS-S3OriginCORS-CustomOrigin。有关更多信息,请参阅使用托管源请求策略
    注意:要改为创建自己的缓存策略,请参阅创建缓存策略
  5. 选择 Create Behavior(创建行为)。 或者,如果您正在编辑现有行为,请选择 Save changes(保存更改)。

要使用缓存策略转发标头,请执行以下操作:

  1. 创建缓存策略
  2. Cache key settings(缓存键设置)下,为 Headers(标头)选择 Include the following headers(包括以下标头)。从 Add header(添加标头)下拉列表中,选择一个源所需的标头。
  3. 根据要将策略附加到的行为的要求填写缓存策略设置。
  4. 将缓存策略附加到 CloudFront 分配的相关行为

要使用旧式缓存设置转发标头,请执行以下操作:

  1. CloudFront 控制台打开分配。
  2. 选择 Behaviors(行为)选项卡。
  3. 选择 Create Behavior(创建行为)。或者选择一个现有行为,然后选择 Edit(编辑)。
  4. Cache key and origin requests(缓存密钥和源请求)下,选择 Legacy cache settings(旧缓存设置)。
  5. Headers(标头)下拉列表中,选择您的源所需的标头。选择 Add custom(添加自定义),以添加源需要但不在下拉列表中的标头。
  6. 选择 Create Behavior(创建行为)。或者,如果您正在编辑现有行为,请选择 Save changes(保存更改)。
注意:同时确保将标头作为您的客户端请求的一部分转发到 CloudFront,然后由 CloudFront 转发到源。

配置 CloudFront 分配的缓存行为以允许 HTTP 请求的 OPTIONS 方法

如果更新 CORS 策略并转发相应标头后仍显示错误,请在分配的缓存行为中允许 OPTIONS HTTP 方法。默认情况下,CloudFront 只允许 GET 和 HEAD 方法。但是,某些 Web 浏览器可能会发出对 OPTIONS 方法的请求。要在 CloudFront 分配中启用 OPTIONS 方法,请执行以下操作:
  1. CloudFront 控制台打开分配。
  2. 选择 Behaviors(行为)选项卡。
  3. 选择 Create Behavior(创建行为)。或者选择一个现有行为,然后选择 Edit(编辑)。
  4. 对于 Allowed HTTP Methods(允许的 HTTP 方法),选择 GET, HEAD, OPTIONS(GET、HEAD、OPTIONS)。
  5. 选择 Create Behavior(创建行为)。或者,如果您正在编辑现有行为,请选择 Save changes(保存更改)。

配置 CloudFront 响应策略以返回所需的 Access-Control-Allow-Origin 标头

如果原始服务器不可访问或无法设置为返回相应的 CORS 标头,请配置 CloudFront 以返回所需的 CORS 标头。要进行配置,请创建响应标头策略

  1. CloudFront 控制台打开分配。
  2. 选择 Behaviors(行为)选项卡。
  3. 选择 Create Behavior(创建行为)。或者选择一个现有行为,然后选择 Edit(编辑)。
  4. 对于响应标头策略:
    从下拉列表中选择现有的响应策略。
    -或者-
    选择 Create policy(创建策略)以创建新的响应标头策略。在新策略中,在 Cross-origin resource sharing(跨源资源共享)下,打开 CORS。
  5. 根据需要填写其他设置,然后选择 Create policy(创建策略)。
  6. 在“Create Behavior”(创建行为)页面中,从下拉列表中选择您创建的策略。
  7. 选择 Create Behavior(创建行为)。或者,如果您正在编辑现有行为,请选择 Save changes(保存更改)。

注意:CloudFront 通常会在五分钟内将更改部署到分配。编辑分配后,请使缓存失效以清除先前缓存的响应。