React Router嵌套路径在S3+CloudFront部署下失效问题求助

问题原因 #

本地开发时，React Dev Server会自动将所有路由请求转发到index.html，交由React Router处理路由匹配。但S3是静态存储服务，直接访问/post/:slug这类动态路径时，S3找不到对应的物理文件，会返回403或404错误。你虽配置了CloudFront错误页转发到index.html，但可能存在配置细节遗漏，导致前端路由无法正常接管请求。

解决步骤 #

1. 确认S3静态网站托管配置

• 打开S3存储桶，进入「属性」→「静态网站托管」，确保已开启该功能
• 索引文档设置为index.html
• 错误文档同样设置为index.html（让S3对不存在的路径返回index.html而非默认错误页）

2. 修正CloudFront原点配置

• 进入CloudFront分发的「原点」设置，将原点域名改为S3静态网站托管的域名（格式类似your-bucket-name.s3-website-region.amazonaws.com），而非S3存储桶的REST API域名（your-bucket-name.s3.amazonaws.com）
• 原因：REST API模式下，S3对不存在的路径返回403错误，而静态网站托管模式会返回你配置的index.html

3. 完善CloudFront错误响应配置

• 进入CloudFront分发的「错误页面」设置，添加以下两个错误响应规则：
  • 错误代码：403，自定义响应页面路径：/index.html，HTTP响应码：200（覆盖原403状态码，让浏览器认为请求成功）
  • 错误代码：404，自定义响应页面路径：/index.html，HTTP响应码：200
• 这一步确保无论S3返回403还是404，CloudFront都返回index.html并以200状态码响应，让React Router能正常解析路由

4. 检查CloudFront缓存行为

• 进入「缓存行为」设置，确认路径模式为/*
• 确保「转发查询字符串」和「转发路径」配置正确（默认即可，无需额外修改，但要保证没有限制路由路径的转发）

5. 清除CloudFront缓存

• 配置完成后，进入CloudFront分发的「失效」页面，创建失效请求，路径填/*，强制刷新缓存，避免旧配置影响测试

验证 #

完成以上配置后，直接在浏览器输入https://BASE_URL/post/slug/或刷新文章页，应该能正常加载对应内容，React Router会正确匹配/post/:slug路由。

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