Angular 10搭配AWS S3+Cloudfront实现无哈希路由刷新及直链访问方案咨询

你遇到的刷新/直接访问子路径404问题是SPA（单页应用）的通用特性：所有路由逻辑都在客户端执行，服务端并没有对应子路径的实际静态资源，所以需要配置访问不存在的路径时统一回退到index.html，交给Angular路由模块自行处理。

步骤1：修改Angular路由配置 #

删除路由配置中的useHash: true参数，Angular 9+版本默认就是History模式，修改后代码如下：

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})

步骤2：配置S3存储桶静态托管规则 #

• 进入对应S3存储桶的「属性」页面，找到「静态网站托管」配置项
• 确认已启用静态网站托管，索引文档填写 index.html
• 错误文档同样填写 index.html，保存配置

步骤3：配置Cloudfront自定义错误响应 #

这一步是为了避免CDN缓存404/403错误，覆盖所有访问场景：

• 进入对应Cloudfront分发的「错误页面」配置页，点击「创建自定义错误响应」
• 分别配置两个错误码规则：
  • 错误码选404 (Not Found)，设置「自定义响应码」为200 (OK)，「响应页路径」填/index.html
  • 错误码选403 (Forbidden)，设置「自定义响应码」为200 (OK)，「响应页路径」填/index.html
• 缓存TTL可根据需求设置，测试阶段建议填0避免缓存影响验证

补充：配置403错误码是因为S3桶默认关闭目录列表权限，访问不存在的路径时会优先返回403而非404，两个规则都配置可以覆盖所有异常场景。

额外注意事项 #

• 如果应用没有部署在域名根路径，构建时需要指定base-href参数，比如部署在https://your-domain.com/mall/下时，构建命令为 ng build --base-href /mall/
• 配置完成后如果验证不生效，可以先提交Cloudfront缓存失效请求，清除旧的缓存资源后再测试

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