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

上次更新时间:2020 年 6 月 29 日

我在转发 Amazon CloudFront 分配的源标头,但却收到错误“No 'Access-Control-Allow-Origin' header is present on the requested resource”。 如何解决此错误? 

简短描述

要避免出现错误“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 策略,请参阅 Nginx 上的 CORS,了解相关说明。要为作为 Amazon Simple Storage Service (Amazon S3) 存储桶的源更新该策略,请参阅启用跨源资源共享 (CORS) 以了解相关说明。

CloudFront 分配转发相应的标头

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

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

要从您的 CloudFront 分配转发标头,请执行以下步骤:

  1. CloudFront 控制台打开分配。
  2. 选择行为选项卡。
  3. 选择创建行为,或者选择现有行为,然后选择编辑
  4. 基于所选的请求标头进行缓存中,选择白名单
  5. 将标头列入白名单下,从左侧菜单中选择标头,然后选择添加
  6. 选择是,编辑

注意:请确保将标头作为您的客户端请求的一部分转发到 CloudFront,然后由 CloudFront 转发到源。

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

如果更新 CORS 策略并转发相应的标头后仍显示错误,请尝试在分配的缓存行为中允许 OPTIONS HTTP 方法。默认情况下,CloudFront 只允许 GET 和 HEAD 方法,但某些 Web 浏览器可能会发出 OPTIONS 方法的请求。

要在 CloudFront 分配中启用 OPTIONS 方法,请执行以下步骤:

  1. CloudFront 控制台打开分配。
  2. 选择行为选项卡。
  3. 选择创建行为,或者选择现有行为,然后选择编辑
  4. 对于允许的 HTTP 方法,选择 GET、HEAD、OPTIONS
  5. 选择是,编辑

注意:CloudFront 通常在五分钟内将更改部署到您的分配。


这篇文章对您有帮助吗?


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