AWS静态站点（S3+CloudFront）：访问时下载index.html而非展示

从你的描述来看，问题出在CloudFront配置环节——S3直接访问正常，但通过CloudFront分发时浏览器会下载index.html而非展示页面，结合你已确认S3中index.html的Content-Type为text/html，大概率是CloudFront未正确传递或识别S3的响应头，或是存在缓存的旧响应规则残留。

排查与修复步骤 #

1. 检查CloudFront缓存策略的响应头设置 #

• 确认CloudFront的缓存策略是否允许传递S3的Content-Type头：如果使用自定义缓存策略，需在允许的响应头列表中明确包含Content-Type；若用默认策略，默认已包含，但建议手动验证配置。
• 排查是否存在错误的响应头修改规则：比如是否误将Content-Type强制设置为application/octet-stream，这会触发浏览器的文件下载行为。

2. 执行全量缓存失效 #

仅针对/index.html做失效可能无法清理边缘节点的全部残留缓存，建议执行全部分发内容失效：

• 登录CloudFront控制台，找到对应分发进入「失效」选项卡。
• 在「对象路径」中输入/*，提交失效请求，等待10-15分钟让边缘节点完成缓存清理。

3. 核对CloudFront源配置 #

• 确认CloudFront的源是否指向S3静态网站托管端点（http://imaginext.app.s3-website-us-east-1.amazonaws.com），而非S3的REST API端点（如imaginext.app.s3.amazonaws.com）。REST端点可能导致头信息传递异常。
• 检查源的「缓存键和源请求」设置，确认没有修改请求头的规则导致S3返回的Content-Type未被正确保留。

4. 强制清理本地浏览器缓存 #

即使CloudFront完成失效，本地浏览器可能仍留存旧缓存：

• 使用快捷键Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，跳过本地缓存。
• 打开浏览器开发者工具（F12），在「网络」选项卡勾选「禁用缓存」，重新加载页面并查看index.html请求的响应头，确认Content-Type是否为text/html。

若以上步骤无法解决问题，需提供以下信息进一步排查：

• CloudFront分发的缓存策略详情（是否自定义、响应头具体设置）
• CloudFront源的完整配置信息
• 浏览器开发者工具中index.html请求的响应头截图

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