AWS S3 部署 react-router 项目路由跳转报 AccessDenied 组件不渲染

核心问题根因 #

你遇到的AccessDenied报错和存储桶策略的Resource字段配置没有关联，本质是两个S3静态托管的设计差异导致的：

1. S3的两类访问端点行为逻辑完全独立
2. 客户端路由的单页应用依赖服务端对所有路由路径兜底返回入口HTML文件，而S3默认配置无法自动满足这个需求

问题拆解 #

• 端点行为差异：
  你当前跳转使用的https://ledgerly.s3.amazonaws.com是S3的REST接口端点，不是静态网站托管的专属端点。这个端点的行为逻辑和静态托管端点完全独立：
  1. 不读取你在静态托管配置里设置的默认首页、错误文档规则
  2. 出于安全设计，当对这个端点发起不存在的对象请求时，因为没有对应的桶List权限，S3不会返回明确的404不存在错误，而是统一返回AccessDenied，避免攻击者通过响应差异枚举桶内的所有对象键值。
     这就是你明明配置了错误文档为index.html，却依然拿到XML格式AccessDenied报错的直接原因。
     只有通过S3控制台「静态网站托管」页面展示的专属端点（格式为https://<bucket>.s3-website.<region>.amazonaws.com）发起请求，才会读取你配置的兜底规则。
• 客户端路由的依赖逻辑：
  你本地环境路由运行正常，是因为本地开发服务器默认对所有路径都返回根目录的index.html，等加载完React代码后，再由React Router根据浏览器URL匹配渲染对应组件。
  这种纯浏览器端路由如果遇到硬跳转（比如用window.location直接改路径、手动刷新页面），浏览器会直接向服务端请求对应路径的资源，如果服务端没有返回index.html入口文件，React代码根本没有机会执行路由匹配逻辑。
• 存储桶策略的有效性：
  你当前配置的存储桶策略完全符合要求：只要放通了对桶下所有对象的s3:GetObject权限，当S3按照规则返回index.html作为兜底内容时，请求是可以正常通过权限校验的，不会触发AccessDenied。
  之前的报错是因为S3在REST端点下根本没有走到返回index.html的逻辑，直接就返回了权限错误，和策略内容无关。你之前尝试把跳转地址改成/index.html/ManagerDashboard没有效果，本质也是因为用错了端点。

落地解决步骤 #

• 替换所有硬跳转的端点地址
  把导航按钮的跳转地址从s3.amazonaws.com域名，替换为你的静态网站托管专属端点地址，不要继续使用REST端点做跳转，否则永远无法触发错误文档兜底逻辑。
• 配置路由兜底重定向规则
  S3默认的错误文档逻辑存在缺陷：当请求路径不存在时，会尝试访问「请求路径 + 错误文档名」对应的key（比如请求/ManagerDashboard时会尝试找/ManagerDashboard/index.html），这个key不存在就会继续报错。
  你需要在S3静态托管的「重定向规则」中添加404兜底逻辑，把所有返回404的请求统一重定向到根目录的/index.html，让客户端路由能拿到完整的入口文件。可直接复用如下规则配置：

  <RoutingRules>
    <RoutingRule>
      <Condition>
        <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
      </Condition>
      <Redirect>
        <ReplaceKeyPrefixWith>index.html</ReplaceKeyPrefixWith>
      </Redirect>
    </RoutingRule>
  </RoutingRules>
  

• 优化跳转实现逻辑
  既然已经接入了React Router，完全不需要使用window.location做整页硬跳转，这种方式会触发全量的资源重新加载，还会触发S3的路径请求问题。直接替换为React Router提供的客户端跳转能力（比如Link组件、编程式导航API），点击按钮时仅在浏览器端修改URL，不发起新的HTTP请求，从根源上避免向S3请求不存在路径的问题。
• 链路验证
  配置完成后，通过静态托管端点直接访问/ManagerDashboard路径，确认S3能正常返回index.html内容，无权限报错，React代码可根据URL路径正常渲染对应组件即可。

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