使用CloudFront CDN时S3图片CORS问题：为何仍无Access-Control-Allow-Origin:*

我来帮你排查下CloudFront + S3场景下CORS头缺失的问题，这种情况我碰到过好几次，通常是这几个地方出问题：

1. CloudFront缓存了旧响应 #

CloudFront的缓存机制会保留之前没有CORS头的资源副本，哪怕你后来更新了S3的CORS配置，缓存的内容还是会继续返回旧的响应头。

解决方法：

• 登录CloudFront控制台，找到你的分发
• 切换到Invalidations标签页，点击Create Invalidation
• 在Paths输入框里填/*（清除所有缓存），然后提交
• 等待缓存失效完成（通常需要几分钟），之后再测试请求

2. S3的CORS配置是否正确且生效 #

先确认S3桶的CORS规则是否配置到位，很多时候是规则里的细节没写对。

正确的通用CORS配置示例（允许所有源、GET/HEAD请求、所有头）：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

注意事项：

• 如果你的请求带有自定义头或者用了POST/PUT等方法，要在AllowedMethod和AllowedHeader里添加对应的项
• S3保存CORS配置后，可能需要1-2分钟才能生效，别刚保存就急着测试

3. CloudFront没有转发Origin请求头 #

CloudFront默认不会把Origin头转发给S3，但S3需要这个头来判断是否返回CORS响应头。

解决方法：

• 进入CloudFront控制台，找到你的分发，切换到Behaviors标签页
• 选择对应的缓存行为（比如默认的*），点击Edit
• 在Cache key and origin requests部分，选择Cache policy and origin request policy (recommended)
• 在Origin request policy下拉框里选择预定义的CORS-S3Origin（这个策略专门配置了转发Origin头给S3）
• 保存修改，等待CloudFront部署完成（大概15分钟）后测试

4. 检查是否有CloudFront自定义响应头冲突 #

如果你在CloudFront里配置了自定义响应头，可能会覆盖S3返回的Access-Control-Allow-Origin，或者你没在自定义头里添加这个字段。

建议：

• 除非有特殊需求，尽量让S3返回CORS头，而不是在CloudFront手动添加
• 如果必须用自定义头，确保Access-Control-Allow-Origin的设置和S3配置一致，不要出现冲突

5. 验证S3源站是否返回正确的头 #

可以绕过CloudFront，直接请求S3的源地址，确认S3本身是否能返回Access-Control-Allow-Origin头。用curl命令测试：

curl -H "Origin: http://example.com" -I https://your-s3-bucket.s3.amazonaws.com/your-target-file.jpg

如果直接请求S3能看到正确的Access-Control-Allow-Origin头，那问题肯定在CloudFront的配置上；如果S3也不返回，那就是S3的CORS配置有问题，再回头检查规则。

内容的提问来源于stack exchange，提问作者Venkatesh