Google Chrome中Manifest.json加载index.html问题求助

我之前碰到过一模一样的问题，这大概率是AWS Amplify的重写与重定向规则或者缓存配置在搞鬼，给你几个靠谱的解决步骤：

1. 检查Amplify的重写与重定向规则 #

Amplify默认会为SPA配置重写规则，把所有404请求导向index.html，但有时候这个规则会覆盖静态文件的请求（尤其是缓存策略冲突时），导致manifest.json也被重定向到index.html。

• 登录AWS Amplify控制台，找到你的应用
• 进入应用设置 > 重写与重定向
• 确保规则顺序是静态文件请求优先于SPA兜底规则：
  • 第一条：添加针对manifest.json的专属规则，让Amplify直接返回该文件
  • 第二条：保留默认的SPA兜底规则（通常是</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/> /index.html 200）

添加优先级更高的manifest规则：

• 源地址：/manifest.json
• 目标地址：/manifest.json
• 类型：200 (重写)

这样Amplify就会直接返回manifest.json，而不会走兜底的index.html重写逻辑。

2. 验证S3文件与元数据设置 #

虽然你说S3文件和本地构建一致，但还是要确认两个关键点：

• 登录S3控制台，找到Amplify对应的存储桶，检查manifest.json是否存在，且权限为公开可读（Amplify部署时一般会自动设置，但可以确认下）
• 查看文件的元数据，确保Content-Type是application/manifest+json，而不是text/html或其他错误类型。错误的内容类型会让Chrome识别异常，甚至触发重写规则。

如果元数据错误，手动修改：

• 选中manifest.json，点击操作 > 编辑元数据
• 添加键Content-Type，值设为application/manifest+json，保存后重新部署Amplify应用。

3. 清除Chrome缓存 #

Chrome经常会缓存旧的响应，哪怕你已经修复了服务器端设置。可以试试：

• 打开Chrome开发者工具（F12）
• 切换到网络标签，勾选禁用缓存，然后刷新页面
• 或者直接清除浏览器缓存（Ctrl+Shift+Delete），再重新访问应用，查看manifest.json的请求响应。

4. 确认Amplify构建配置 #

快速检查你的构建配置是否符合CRA的要求：

• 构建命令：npm run build
• 输出目录：build（CRA默认的构建输出文件夹）

如果输出目录配置错误，Amplify可能没正确上传manifest.json到S3——不过你说S3文件是对的，这条可以快速排除下。

按照上面的步骤排查后，应该就能解决Chrome请求manifest.json返回index.html的问题了。

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