S3静态托管与CloudFront配置下Angular应用控制台错误排查

1. 确认Angular构建的base-href配置 #

• 构建生产包时必须指定正确的base-href，否则静态资源路径会出错：
  • 根域名部署执行：

    ng build --prod --base-href="/"
    

  • 子路径部署（如https://xxx.com/app/）执行：

    ng build --prod --base-href="/app/"
    

• 该配置会修改index.html中的<base href>标签，错误的路径会导致js、css等资源加载404，触发控制台报错。

2. 修正CloudFront错误页面的状态码转换 #

• 进入CloudFront分发的「错误页面」配置：
  • 确保404、403错误的「响应页面路径」设为/index.html，同时将「HTTP响应代码」改为200 OK。
  • 如果保留原始404状态码，浏览器会判定资源加载失败，即使页面能正常渲染，控制台仍会抛出错误。

3. 验证S3存储桶的文件与配置 #

• 确认S3静态网站托管的「索引文档」和「错误文档」均为index.html。
• 检查S3内的文件结构是否与Angular构建后的dist目录完全一致，确保所有静态资源（包括隐藏的.js.map等文件）都已上传，无遗漏。

4. 刷新CloudFront缓存并调整缓存策略 #

• 手动创建CloudFront缓存失效，路径填写/*，强制刷新所有缓存内容，避免旧配置残留。
• 对index.html设置较短的缓存时间（或禁用缓存），防止路由跳转时加载过期页面；对js、css、图片等静态资源设置合理的长期缓存策略。

5. 调整Angular路由策略（可选） #

• 若不想依赖服务器端的错误页面配置，可切换为HashLocationStrategy：
  在AppModule的providers数组中添加：

  { provide: LocationStrategy, useClass: HashLocationStrategy }
  

• 此配置会让路由变为/#/xxx的形式，避免直接访问路由时触发404错误。

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