AWS静态网站无法直接访问子页面，如何解决？

问题场景 #

使用AWS S3存储桶、CloudFront和Route53搭建静态网站，直接访问www.<MyWebsite>.com/about时出现如下AccessDenied错误：

This XML file does not appear to have any style information associated with it. The document tree is shown below.

return (<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId>PD94JP7DNG6TPDQF</RequestId>
  <HostId>qc0Fvl3fiS7igVeBEYfwvX19so0dH3hmIWNRBOcveK+j4DMmoPZQsxmbeA0XhFisy1BQvxmmrj8=</HostId>
</Error>)

但通过主页导航栏进入about板块可正常访问，需配置支持直接访问任意子页面。

核心原因 #

直接访问子路径时，CloudFront会向S3请求对应路径的对象（比如/about），但S3存储桶中不存在该对象——要么实际文件是/about.html，要么该路径属于前端路由（SPA场景），因此返回AccessDenied。而通过主页导航是前端路由跳转，不会触发新的服务器请求，因此正常。

解决方案 #

方法一：配置CloudFront自定义错误响应（推荐用于SPA） #

1. 进入CloudFront控制台，找到对应分发，切换到「错误页面」标签页。
2. 点击「创建自定义错误响应」，添加两条规则：
   • 错误代码：403 Forbidden
     • 自定义响应页面路径：/index.html
     • HTTP响应代码：200 OK
   • 错误代码：404 Not Found
     • 自定义响应页面路径：/index.html
     • HTTP响应代码：200 OK
3. 保存配置，等待CloudFront分发更新完成（通常10-15分钟）。

方法二：配置S3存储桶重定向规则 #

1. 进入S3控制台，找到对应存储桶，切换到「属性」标签页，下滑至「静态网站托管」。
2. 点击「编辑」，在「重定向规则」中添加以下XML规则：

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>www.<MyWebsite>.com</HostName>
      <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
      <HttpRedirectCode>200</HttpRedirectCode>
    </Redirect>
  </RoutingRule>
</RoutingRules>

3. 保存配置，确保CloudFront的源指向S3静态网站托管端点（而非S3对象存储端点）。

注意事项 #

• 若使用SPA框架（如React、Vue），优先选择方法一，确保前端路由能正确处理子路径。
• 配置完成后需等待CloudFront缓存刷新，若测试仍有问题，可手动触发缓存失效。

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