GSC爬取CloudFront+S3托管React站路由报403如何解决

React 属于单页应用（SPA），路由逻辑全部在客户端侧执行，S3 存储桶中实际仅存在根路径的 index.html 和打包后的 JS/CSS 等静态资源，不存在和 React 自定义路由（如 /product/detail、/about）路径完全匹配的实体文件。
当 CloudFront 收到子路由请求时，会默认直接转发给 S3 查找对应路径的对象，S3 找不到目标对象时会直接返回 403 错误（开启 S3 阻止公共访问时，找不到对象默认返回 403 而非 404），不会将请求 fallback 到 index.html 交给 React 路由接管，这就是首页可正常访问、子路由全返回 403 的核心原因，该问题和 S3 是否开启公开访问没有直接关系。

按优先级依次操作：

• 配置 CloudFront 自定义错误响应（核心修复）
  进入对应 CloudFront 分发的设置页，找到「错误页面」选项卡，新建两条自定义错误响应规则：
  1. 错误码选择 403 Forbidden，开启自定义错误响应，响应页面路径填写 /index.html，返回的 HTTP 状态码选择 200 OK
  2. 错误码选择 404 Not Found，开启自定义错误响应，响应页面路径填写 /index.html，返回的 HTTP 状态码选择 200 OK
     配置完成后等待 CloudFront 分发部署生效，通常需要 5-10 分钟。
• 校验 CloudFront 源访问控制配置
  由于你配置了 S3 仅允许 CloudFront 访问，需确认没有配置错误的拦截规则：
  • 源访问方式推荐使用 CloudFront 源访问控制（OAC，替代旧版 OAI），不要通过自定义 Referer 头限制来源——Google 爬虫发起的请求不会携带你站点的 Referer 头，这类规则会直接拦截爬虫请求返回 403。
  • 确认 OAC 对应的权限策略已经正确同步到 S3 桶策略中，不要为了放行请求直接将 S3 设置为完全公开，避免出现数据泄露、被恶意刷流量的风险。
• 可选：S3 侧补充重定向规则（仅当你使用 S3 静态网站托管端点作为 CloudFront 源时配置）
  如果你将 CloudFront 源设置为 S3 静态网站托管的域名而非 S3 REST API 端点，可以在 S3 静态网站托管配置中补充重定向规则，将所有 404 请求转发到 index.html，配置示例如下：

  [
    {
      "Condition": {
        "HttpErrorCodeReturnedEquals": "404"
      },
      "Redirect": {
        "ReplaceKeyWith": "index.html",
        "HttpRedirectCode": "200"
      }
    }
  ]
  

  该方案需要开启 S3 静态网站托管，安全度低于 CloudFront 侧错误响应方案，优先推荐前一种方案。
• 修复验证
  等 CloudFront 部署完成后，先用浏览器隐身窗口访问任意 React 子路由确认可正常加载，再到 Google Search Console 重新做实时 URL 检测，403 问题就会消失。

注意：如果配置后还是返回 403，先检查 CloudFront 缓存策略是否对错误页做了缓存，可临时做一次缓存失效（失效路径填/*）后再测试。

内容的提问来源于stack exchange，提问作者ayon-das