CloudFront+S3托管Angular应用子路由直接访问403解决方法

托管在AWS S3上、通过CloudFront分发的Angular应用完全支持直接访问首页之外的子路由，你遇到的403错误是单页应用客户端路由和静态托管服务的适配问题，不属于功能不支持。

Angular默认采用客户端路由机制：

• 应用内通过路由跳转访问myapp.com/items时，浏览器不会向服务端发起新的页面请求，由Angular运行时在前端修改URL、渲染对应组件，因此不会触发服务端的资源查找逻辑，访问正常。
• 直接在地址栏输入子路由地址、或刷新子路由页面时，浏览器会直接向CloudFront发起对应路径的资源请求，请求回源到S3后，S3会查找路径对应的存储对象。由于Angular打包后仅存在index.html及对应的JS/CSS静态资源，根本不存在/items对应的实体文件/目录，此时如果你使用S3 REST API作为CloudFront源（搭配OAC/OAI做私有桶访问的常用配置），S3为了防止对象枚举，会对不存在的对象统一返回403 Forbidden而非404，这就是报错的核心原因。

推荐优先使用CloudFront自定义错误响应方案，不需要修改S3的公网访问配置，安全性更高，配置步骤如下：

• 登录AWS控制台进入CloudFront服务页，选中你的应用对应的分发实例
• 切换到「错误页面」配置 tab，新建2条自定义错误响应规则：
  1. 针对403错误的规则：
     • 源站HTTP错误码选择403: Forbidden
     • 开启自定义错误响应
     • 响应页面路径填写/index.html
     • 返回给客户端的HTTP状态码选择200: OK
  2. 针对404错误的规则：
     • 源站HTTP错误码选择404: Not Found
     • 开启自定义错误响应
     • 响应页面路径填写/index.html
     • 返回给客户端的HTTP状态码选择200: OK
• 保存配置后等待CloudFront分发部署完成（通常需要3-5分钟），即可直接访问所有子路由。

备选方案（不推荐） #

如果你使用S3静态网站托管端点作为CloudFront源，可以直接在S3侧配置重定向规则：

• 将CloudFront源站地址从S3 REST API端点修改为对应桶的静态网站托管端点
• 进入S3桶的属性配置页，找到「静态网站托管」配置块，编辑路由规则，将所有不存在对应实体对象的请求统一重写到/index.html，返回200状态码即可。

注意：该方案需要开启S3静态网站托管的公网访问能力，安全性低于CloudFront错误响应方案，不建议生产环境使用。

确认Angular项目构建时的index.html中<base href>配置与实际部署路径匹配：如果应用部署在域名根路径，配置为<base href="/">即可；如果部署在域名的子路径下，需要对应修改为子路径值，否则会出现资源加载异常。

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