CloudFront无法加载S3 Bucket中React应用特定路由问题求助

问题根源 #

React是单页应用，所有路由都是前端层面处理的，本质上所有路径最终都需要指向根目录的index.html。当你直接访问/signin这类路径时，CloudFront会默认去S3 Bucket中查找名为signin的文件或文件夹，但构建产物里根本不存在这个资源，因此触发S3的AccessDenied错误。

一步步排查解决 #

1. 配置CloudFront错误页面重定向（核心步骤） #

把404、403错误请求都导向index.html，让前端路由接管：

• 登录CloudFront控制台，找到目标分发
• 进入「错误页面」标签页，点击「创建自定义错误响应」
• 分别配置两种错误规则：
  • HTTP错误代码：选择404 Not Found
  • 自定义响应页面路径：填写/index.html
  • HTTP响应代码：选择200 OK
  • 重复上述操作，将403 Forbidden也按相同规则配置
• 保存配置后，等待10-15分钟让CloudFront完成分发更新

2. 检查S3 Bucket的静态网站托管配置 #

• 确认S3 Bucket已开启「静态网站托管」，将索引文档设置为index.html，错误文档也可设为index.html
• 权限配置上，避免直接开启公有访问（生产环境不安全），推荐通过CloudFront的Origin Access Control (OAC) 或旧版的Origin Access Identity (OAI) 授予CloudFront访问S3资源的权限，确保只有CloudFront能拉取S3内容

3. 修正CloudFront分发行为设置 #

• 不要单独配置/signin、/signup这类路径模式，直接配置一个默认行为，路径模式设为/*，让所有请求都走这个规则路由到S3根目录
• 源域名要选择S3的静态网站托管域名（格式类似bucket-name.s3-website-region.amazonaws.com），而非S3的REST API域名（bucket-name.s3.amazonaws.com），否则会影响静态路由的解析
• 若缓存策略过于严格导致旧配置残留，可适当调低缓存时间，或手动刷新CloudFront缓存

4. 验证构建产物与S3同步情况 #

• 确认React应用构建后的所有文件（包括index.html、JS/CSS静态资源等）已完整上传到S3 Bucket根目录
• 检查S3中是否存在多余的文件夹，确保index.html没有被放到子目录中

5. 测试与问题定位 #

• 等待CloudFront配置更新完成后，直接访问/signin、/signup等路径，验证是否能正常加载页面
• 若问题仍存在，可开启CloudFront的「查看器请求日志」，通过日志排查具体的请求路径和错误细节，进一步定位问题

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