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

上次更新时间:2019 年 6 月 6 日

我在转发 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 分配的缓存行为允许 HTTP 请求的 OPTIONS 方法

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

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

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

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

注意:另外,请务必将标头作为请求的一部分转发到源。

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

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

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

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

这篇文章对您有帮助吗?

您觉得我们哪些地方需要改进?


需要更多帮助?