为什么图像不能通过 CloudFront 加载？

简短描述

由于权限或配置问题，或者因为 403 或 404 错误，可能会阻止图像。

要确定是否有错误消息阻止图像加载，请打开浏览器的开发者工具。在 Network（网络）选项卡上，找到图像请求的网络调用。在请求的响应标头中，检查 404 或 403 错误代码。

如果 Server（服务器）的值设置为 Amazon Simple Storage Service（Amazon S3）或自定义原始服务器名称，则源将返回错误代码。

解决方法

CloudFront 没有访问 Amazon S3 源的权限

如果您在 CloudFront 中配置了来源访问身份（OAI）以访问来自 Amazon S3 Rest API 端点的图像，则请确认该桶具有授予 OAI 访问桶中内容的桶策略。如果没有该策略，当从 CloudFront 发出请求时，将返回 403: Access Denied（403：访问被拒绝）错误，并且无法加载图像。

要解决此错误，请检查您的 S3 桶策略权限。

该图像在 S3 源或自定义源中不存在

如果请求的图像文件不存在于桶中或位于其他文件夹中，则会返回 403 或 404 错误。返回的错误取决于您的 S3 桶权限：

• 如果您对桶拥有 s3:ListBucket 权限，则 Amazon S3 会返回 404: No Such Key（404：没有此密钥）错误。
• 如果您没有 s3:ListBucket 权限，则 Amazon S3 会返回 403: Access Denied（403：访问被拒绝）错误。

行为路径模式将请求定向到错误的源或文件夹

如果您的分发有多个行为，且具有不同的路径模式，则可能会将图像定向到不正确的源或文件不存在的文件夹。在这种情况下，您会看到 404 错误。

要解决此错误，请查看分发的行为和路径模式。确认请求落在匹配路径模式的正确行为上，并被定向到正确的源。

例如，在以下配置中，Behavior1 具有路径模式 "test"，用于将请求路由到 S3 源。Behavior2 具有路径模式 "Default(*)"，用于将流量路由到弹性负载均衡器（ELB）源。

Behavior1: Path pattern = test ====> S3 origin 
Default Behavior: Path pattern = Default (*)=====> ELB origin

当发出 “https://example.com/test/myimage.png” 的请求时，分发会将路径与 Behavior2 的路径模式 Default (*) 进行匹配。请求与 Behavior1 路径模式测试 test 不匹配，因为 test 末尾没有通配符。如果没有通配符，则此请求与默认行为的路径模式匹配，并定向到 ELB 源。由于该对象在 ELB 源中不存在，因此请求将返回 404 错误，并且图像将无法加载。

未为标头、Cookie 或查询字符串配置行为缓存设置

源可能需要在请求中传递特定的标头、Cookie 或查询字符串才能提供所请求的图像。在这种情况下，使用 CloudFront 发出请求时，不会加载图像。但是，如果直接向源发出相同的请求，则请求会成功，并且源返回请求的资源。

要进行故障排除，请确定源是否需要特定的标头、Cookie 或查询字符串来处理请求。然后，确保 Behavior cache settings（行为缓存设置）中允许这些要求。

使用源请求策略允许 CloudFront 发送到源的请求中包含的值（标头、Cookie 和查询字符串）。您也可以使用旧版缓存设置。

源上未正确设置图像的元数据

如果源中 Content-Type 元数据未设置为 image/png，则图像将被下载而不是显示在浏览器中。

要解决此问题，请检查 Content-Type 元数据。如果需要，请将 S3 或自定义源中的图像值更新为 image/png。

CORS 错误导致图像无法加载

如果 CloudFront 或源中的 CORS 配置设置不正确，则您会收到错误消息："No 'Access-Control-Allow-Origin' header is present on the requested resource"（请求的资源上没有 'Access-Control-Allow-Origin' 标头）。

要解决此问题，请确认已为 CloudFront 和源设置了 CORS 配置。有关更多信息，请参阅如何解决 CloudFront 发出的 "No'Access-Control-Allow-Origin' header is present on the requested resource"（请求的资源上没有 'Access-Control-Allow-Origin' 标头）错误？

---