AWS S3托管静态网站OAuth2认证后访问失败排查求助

碰到过一模一样的场景，这个错误基本都是因为CloudFront的配置和OAuth回调的前端路由不兼容导致的，结合你的情况给你一步步排查解决的方案：

核心原因分析 #

你的回调URL带了哈希（#access_token=XXXXXXXXX），这部分内容是浏览器端处理的，不会发送到CloudFront/S3，但问题出在/callback这个路径本身——因为是静态单页应用（SPA），S3桶里并没有callback.html这个文件，CloudFront默认会返回404错误，进而触发X-cache: error from cloudfront。

具体解决步骤 #

1. 配置CloudFront自定义错误响应（关键步骤） #

因为SPA的所有路由都需要由前端处理，所以要让CloudFront把404/403错误重定向到index.html，并返回200状态码：

• 打开你的CloudFront分发控制台，切换到错误页面标签
• 点击「创建自定义错误响应」，分别添加两个规则：
  • 错误代码：404 Not Found，响应页面路径填/index.html，HTTP响应代码选「200 OK」
  • 错误代码：403 Forbidden，响应页面路径填/index.html，HTTP响应代码选「200 OK」
• 保存配置，等待CloudFront分发更新（通常需要10-15分钟）

2. 检查CloudFront缓存行为配置 #

确保针对/callback路径（或者全局/*）的缓存行为符合以下要求：

• 允许的HTTP方法至少包含GET和HEAD（OAuth回调是GET请求）
• 「缓存策略」选择合适的策略，比如不缓存查询字符串（因为哈希不影响缓存，但要避免不必要的缓存键）
• 「源请求策略」如果需要传递用户相关的头信息，确保没有误拦截必要的参数

3. 验证Google OAuth回调URL配置 #

登录Google Cloud Console，找到你的OAuth 2.0客户端ID，确认授权回调URL和你实际使用的https://library.test.com/callback完全一致：

• 协议必须是https（因为CloudFront用了SSL）
• 路径不能有多余的斜杠（比如不能写成/callback/）
• 大小写要匹配（虽然URL不区分大小写，但严格一致避免意外问题）

4. 清除CloudFront缓存 #

修改配置后，旧的缓存可能还在生效，需要手动清除：

• 在CloudFront分发控制台的「无效化」标签，创建一个新的无效化请求
• 路径填/*，选择「创建无效化」，等待缓存刷新完成

5. 检查S3静态站基础配置 #

确保S3桶的静态网站托管已经正确启用：

• 索引文档设置为index.html
• 错误文档如果是SPA的话，也可以设为index.html（不过CloudFront的错误响应优先级更高，这一步可选）

验证 #

等CloudFront配置更新和缓存清除完成后，重新触发Google OAuth认证，回调到https://library.test.com/callback#access_token=XXXXXXXXX时，应该会正常加载前端页面，由前端解析哈希中的access_token，同时响应头的X-cache会显示Hit from cloudfront或者Miss from cloudfront，不再是error状态。

内容的提问来源于stack exchange，提问作者Tara Prasad Gurung