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

上次更新时间:2021 年 9 月 14 日

我在转发 Amazon CloudFront 分配的源标头时收到错误“No 'Access-Control-Allow-Origin' header is present on the requested resource”(请求的资源中无“Access-Control-Allow-Origin“标头)。 如何解决此错误?

简短描述

要避免出现错误“No 'Access-Control-Allow-Origin' header is present on the requested resource”,请验证以下内容:

  • 源的跨源资源共享 (CORS) 策略允许源返回“Access-Control-Allow-Origin”标头。
  • CloudFront 分配转发相应的标头。
  • CloudFront 分配的缓存行为允许 HTTP 请求的 OPTIONS 方法。

解决方法

源的 CORS 策略允许源返回“Access-Control-Allow-Origin”标头

运行如下类似 curl 命令,检查源是否返回“Access-Control-Allow-Origin”标头:

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

如果 CORS 策略允许源返回标头,则该命令会返回类似于以下内容的消息:

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

要为 NGINX 上的源更新 CORS 策略,请参阅 CORS on NGINX 了解相关说明。要为属于 Amazon Simple Storage Service(Amazon S3)存储桶的源更新该策略,请参阅 CORS 配置以了解相关说明。

CloudFront 分配转发相应的标头

在源上设置 CORS 后,将 CloudFront 分配配置为转发源所需的标头。如果您的源是 S3 存储桶,则通常必须将分配配置为将以下标头转发至 Amazon S3:

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

要为 S3 或自定义源打开 CORS,您需要将所需的标头传递给源。根据所使用的源类型,CloudFront 有两个预先定义的策略:CORS-S3OriginCORS-CustomOrigin。要将这些策略添加到您的分配中,请执行以下步骤:

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

要使用源请求策略转发标头,请执行以下步骤:

  1. 按照使用 CloudFront 控制台创建缓存策略的步骤操作。
  2. Cache key(缓存键)设置下,为 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. 选择 Save Changes(保存更改)。如果要创建行为,请选择 Create Behavior(创建行为)。

注意:同时确保将标头作为您的客户端请求的一部分转发到 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. 选择 Save Changes(保存更改)。如果要创建行为,请选择 Create Behavior(创建行为)。

注意:CloudFront 通常会在五分钟内将更改部署到您的分配。编辑分配后,请考虑使缓存失效,否则您可能仍会收到以前缓存的响应。


这篇文章对您有帮助吗?


您是否需要账单或技术支持?