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

解决方法

确认源的跨源资源共享（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-S3Origin 和 CORS-CustomOrigin。

要向您的分配中添加预定义策略，请执行以下操作：

1. 从 CloudFront 控制台打开分配。
2. 选择行为选项卡。
3. 选择创建行为。或者选择一个现有行为，然后选择编辑。
4. 在缓存键和源请求下，选择**缓存策略和源请求策略。**然后，对于源请求策略，从下拉列表中选择 CORS-S3Origin 或 CORS-CustomOrigin。有关更多信息，请参阅使用托管源请求策略。
   注意： 要改为创建自己的缓存策略，请参阅创建缓存策略。
5. 选择创建行为。或者，如果您正在编辑现有行为，请选择保存更改。

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

1. 创建缓存策略。
2. 在缓存键设置下，对于标头，选择包括以下标头。从添加标头下拉列表中，选择一个源所需的标头。
3. 根据您附加策略的行为的要求填写缓存策略设置。
4. 将缓存策略附加到 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 响应策略以返回所需的 Access-Control-Allow-Origin 标头

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

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

注意： CloudFront 通常会在五分钟内将更改部署到分配。编辑分配后，使用invalidate the cache，以清除先前缓存的响应。

相关信息

Configuring CloudFront to respect CORS settings

配置跨源资源共享（CORS）

Using the managed response headers policies

Add a cross-origin resource sharing (CORS) header to the response