使用CloudFront自定义域名时为何出现CORS错误？

核心排查与修复步骤 #

默认URL正常、自定义域名报错，说明S3基础CORS配置和CloudFront核心转发逻辑无问题，问题集中在自定义域名对应的CloudFront配置细节上，按以下步骤逐一验证：

1. 检查自定义域名的缓存行为配置 #

• 确认缓存行为中已转发Origin请求头：CloudFront默认不转发该头，需在缓存行为的「转发请求头」设置里，将Origin加入白名单（推荐仅转发必要头以优化缓存，而非全部转发）。
• 检查缓存策略是否丢弃CORS响应头：若使用自定义缓存策略，需确保允许缓存包含Access-Control-Allow-Origin等CORS相关头的响应，避免CloudFront缓存时移除这些头。

2. 验证自定义域名的SSL/TLS配置 #

• 确认自定义域名绑定的CloudFront SSL证书有效（来自AWS Certificate Manager且覆盖该域名）：部分浏览器在SSL证书异常时会屏蔽CORS头返回，表现为CORS错误。
• 确保前端请求使用HTTPS访问自定义域名：若开启了HTTP到HTTPS强制跳转，跳转过程可能丢失CORS头，需统一使用HTTPS请求。

3. 检查CloudFront响应头策略 #

• 若配置了自定义响应头策略，确认未覆盖或删除Access-Control-Allow-Origin头：误加删除规则会导致S3返回的CORS头被CloudFront移除。
• 可针对自定义域名的缓存行为单独配置响应头策略，明确添加Access-Control-Allow-Origin（设为*或指定允许的前端域名），优先级高于S3返回的头（适合统一控制场景）。

4. 强制清除CloudFront缓存 #

自定义域名对应的缓存可能保留了未包含CORS头的旧响应，需手动触发缓存失效：路径填/*清空所有缓存后，重新测试请求。

5. 再确认S3桶CORS配置细节 #

确保S3的CORS规则覆盖自定义域名，且允许GET方法（图片请求为GET），示例配置：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>https://your-custom-domain.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

注意：若S3启用静态网站托管，需确认CloudFront源站配置的是静态网站端点而非S3 API端点。

6. 用curl对比请求响应头 #

分别请求默认URL和自定义域名，对比响应头差异：

curl -H "Origin: https://your-frontend-domain.com" -I https://dxxxxxx.cloudfront.net/image.jpg
curl -H "Origin: https://your-frontend-domain.com" -I https://your-custom-domain.com/image.jpg

查看两个请求的Access-Control-Allow-Origin是否存在，以及其他CORS相关头是否一致，快速定位问题环节。

内容的提问来源于stack exchange，提问作者Wil S.