如何解决 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. 选择 Behaviors（行为）选项卡。
3. 选择 Create Behavior（创建行为）。或者选择一个现有行为，然后选择 Edit（编辑）。
4. 在 Cache key and origin requests（缓存键和源请求）下，选择 Cache policy and origin request policy（缓存策略和源请求策略）。 然后，对于源请求策略，从下拉列表中选择 CORS-S3Origin 或 CORS-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 通常会在五分钟内将更改部署到分配。编辑分配后，请使缓存失效以清除先前缓存的响应。

---

相关信息

配置 CloudFront 以考虑 CORS 设置

跨源资源共享（CORS）

使用托管响应标头策略

向响应添加跨域资源共享（CORS）标头