S3/CloudFront未发送image/jpeg Content-Type致图片无法在浏览器显示

你已经精准定位到了核心问题：虽然在S3控制台给JPG文件设置了Content-Type: image/jpeg，但CloudFront分发时没有正确返回这个响应头，导致浏览器只能下载文件而无法直接渲染显示。下面是一步步的排查和解决方法：

问题相关截图 #

• S3控制台文件概览页面：
• S3文件属性页（已设置Content-Type）：
• S3控制台直接打开的效果：
• CloudFront URL在浏览器的显示效果：

1. 先确认S3本身是否返回正确的Content-Type #

先排除S3端的问题：直接访问S3对象的原始URL（跳过CloudFront），打开浏览器开发者工具的Network标签，查看该请求的响应头，确认Content-Type是否为image/jpeg。如果S3本身返回正确，那问题100%出在CloudFront的配置或缓存上；如果S3也没返回正确，可以用AWS CLI强制更新元数据：

aws s3api copy-object \
  --bucket YOUR_BUCKET_NAME \
  --key claims/us-east-1:4877c3da-786a-4b3b-b1e0-c70bde0f9c4e741afc7c5a8304564963080a98e5675d09d1aca3d623911e34bd3b4eb0808579/300ae913-8f88-44b9-a4ab-e46d11133c76/receipt.jpg \
  --copy-source YOUR_BUCKET_NAME/claims/us-east-1:4877c3da-786a-4b3b-b1e0-c70bde0f9c4e741afc7c5a8304564963080a98e5675d09d1aca3d623911e34bd3b4eb0808579/300ae913-8f88-44b9-a4ab-e46d11133c76/receipt.jpg \
  --content-type image/jpeg \
  --metadata-directive REPLACE

2. 检查CloudFront缓存策略是否包含Content-Type #

CloudFront的缓存策略决定了哪些响应头会被缓存并返回给用户：

1. 登录CloudFront控制台，找到你的分发，切换到Behaviors标签页。
2. 选中对应文件路径的行为（如果没有单独配置，就是默认行为），点击Edit。
3. 在Cache policy部分，查看当前使用的策略：
   • 如果是自定义策略：确认Headers选项中是否包含Content-Type，如果没有，添加后保存。
   • 如果是AWS托管的默认策略：比如CachingOptimized默认会包含Content-Type，但建议核实。

3. 立即失效CloudFront的缓存 #

即使你现在修复了配置，CloudFront可能还在返回之前缓存的旧响应（没有正确的Content-Type）。必须手动触发缓存失效：

1. 在CloudFront控制台的分发页面，切换到Invalidations标签页。
2. 点击Create Invalidation，在Paths输入框中填写具体的文件路径：

   /claims/us-east-1:4877c3da-786a-4b3b-b1e0-c70bde0f9c4e741afc7c5a8304564963080a98e5675d09d1aca3d623911e34bd3b4eb0808579/300ae913-8f88-44b9-a4ab-e46d11133c76/receipt.jpg
   

   （如果需要批量失效可以用/*，但注意频繁大尺度失效可能产生额外费用）
3. 提交失效请求，等待状态变为Completed（通常需要5-15分钟），之后再测试CloudFront URL。

4. 检查Origin Request Policy（可选） #

如果你的分发配置了Origin Request Policy，确认该策略允许CloudFront从S3获取Content-Type头：

• 在Behaviors编辑页面，查看Origin request policy，确保它没有过滤掉Content-Type。如果不确定，可以临时切换到AllViewerAndCloudFrontHeaders策略测试，确认问题是否解决。

完成以上步骤后，再用浏览器访问CloudFront URL，打开开发者工具查看响应头，确认Content-Type: image/jpeg已正确返回，这时图片应该就能正常显示了。

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