ReactJS部署AWS S3后URL子路径无法访问的解决方法

问题原因 #

React是单页应用（SPA），路由由客户端的React Router处理：

• 点击页面内跳转按钮时，是React Router在浏览器端直接切换组件，不会向S3发送新的资源请求，因此正常。
• 直接在地址栏输入/about这类子路由时，浏览器会向S3请求对应路径的文件，但S3桶里只有index.html和静态资源文件，不存在about这个文件/目录，因此返回AccessDenied错误。

解决方案（无需更换Next.js/Gatsby） #

方案1：配置S3静态网站托管的错误文档 #

1. 打开AWS控制台，进入目标S3桶
2. 切换到「属性」标签页，找到「静态网站托管」配置项
3. 将「错误文档」设置为index.html
4. 保存配置

原理：当S3找不到请求的资源时，会返回index.html，此时React Router会接管请求，根据地址栏路径渲染对应组件。

方案2：配合CloudFront（若使用CDN） #

如果你的S3网站通过CloudFront分发，需额外配置自定义错误响应：

1. 进入CloudFront控制台，找到对应分发
2. 切换到「错误页面」标签页，点击「创建自定义错误响应」
3. 添加两个规则：
   • HTTP错误代码：403 Forbidden，自定义响应页面路径：/index.html，HTTP响应代码：200 OK
   • HTTP错误代码：404 Not Found，自定义响应页面路径：/index.html，HTTP响应代码：200 OK
4. 保存配置并等待CloudFront部署完成

原理：CloudFront会将403/404错误重定向到index.html，确保React Router能正常处理客户端路由。

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