Angular 5页面刷新/直接访问时触发AccessDenied问题求助

这个问题太常见了，尤其是用CloudFront搭配S3托管单页应用（SPA）的时候，我帮很多开发者排查过类似问题。核心原因是S3是对象存储服务，不是传统的web服务器，它只会严格匹配请求路径对应的对象，而前端路由（比如React/Vue的客户端路由）在刷新或直接访问子路径时，CloudFront会把路径原样转发给S3，S3找不到对应对象就返回AccessDenied。

下面给你几个最有效的解决方法，按推荐优先级排序：

方法一：配置CloudFront自定义错误页面（最推荐，适合SPA） #

这个方法让CloudFront把403/404错误重定向到你的首页（index.html），这样前端路由就能接手处理子路径了，步骤很简单：

• 打开CloudFront控制台，找到你的目标分发
• 切换到「错误页面」标签页
• 点击「创建自定义错误响应」，分别添加两条规则：
  1. HTTP错误代码选403 Forbidden，自定义响应代码设为200 OK，响应页面路径填/index.html，勾选「自定义错误响应」
  2. 同样添加404 Not Found的规则，参数和上面完全一致
• 保存更改后，等待CloudFront的分发更新（通常需要5-30分钟，取决于你的分发规模）

等更新完成后，再刷新或直接访问子路径，就会正常加载首页，前端路由会自动匹配对应的页面。

方法二：将CloudFront源指向S3静态网站托管端点 #

如果你的S3已经开启了静态网站托管，也可以让CloudFront直接指向S3的静态网站端点，而不是默认的S3 REST API端点：

1. 先确认S3桶已经开启「静态网站托管」，设置好索引文档（比如index.html）和错误文档（可选设为index.html）
2. 回到CloudFront分发的「源」设置，修改源域名：把原来的bucket-name.s3.amazonaws.com换成S3静态网站的端点（比如bucket-name.s3-website-us-east-1.amazonaws.com，具体地址在S3静态网站托管页面可以看到）
3. 源协议选择「HTTP only」（因为S3静态网站端点不支持HTTPS，CloudFront会帮你处理SSL层的加密）
4. 保存并等待分发更新

这个方法的原理是S3静态网站托管会自动处理路径跳转，比如访问/home时，它会尝试找/home/index.html，如果找不到就返回你设置的错误文档（也就是首页），从而让前端路由生效。

方法三：针对多页应用的路径适配（如果不是SPA） #

如果你托管的是传统多页应用，每个子路径对应S3里的一个HTML文件（比如/home对应/home.html或者/home/index.html），那需要检查：

• 确保S3里的对象路径和请求路径匹配，比如请求/home的话，S3里要有home.html或者开启了静态网站托管的「索引文档」设置（自动追加index.html）
• 检查CloudFront的「缓存行为」设置，确保路径转发规则是「转发全部请求，包括查询字符串、头和Cookie」（默认是转发的，但如果有自定义设置可能会影响）

额外提醒 #

• 不管用哪种方法，都要记得等待CloudFront分发更新完成，不然修改不会立即生效
• 如果你的网站有缓存，可能需要手动清除CloudFront的缓存（在分发的「缓存」标签页里操作），确保新的规则生效

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