AWS混合内容错误：CloudFront托管S3前端直连EC2而非HTTPS负载均衡器

核心原因 #

异常特征完全匹配CloudFront层缓存了旧版本前端静态资源的场景：

• S3存储桶中存放的是你最新构建的代码，已经将后端API地址替换为HTTPS负载均衡器域名，因此直连S3端点时，前端能拿到正确的配置，功能运行正常。
• CloudFront没有同步源站的最新内容，仍然返回你早期未更新API配置时的旧版构建产物，其中硬编码的后端地址还是开发阶段使用的http://ec2.eu-west-2.compute.amazonaws.com:8080，触发HTTPS页面的混合内容拦截规则。

快速验证方法 #

• 对比两个访问入口加载的主JS bundle内容：
  • 从https://www.example.de打开开发者工具的网络面板，找到体积最大的主JS文件，搜索关键词ec2.eu-west-2，如果能匹配到EC2的HTTP地址，即可确认加载的是旧版本代码。
  • 直连S3端点访问时，同样搜索JS文件内容，会发现只有配置的HTTPS负载均衡器地址，不存在EC2相关字符串。
• 检查资源响应头：CloudFront返回的资源如果带有X-Cache: Hit from cloudfront标识，且文件内容和S3上的最新版本不一致，即可100%确认是缓存问题。

修复操作 #

• 立即恢复：登录CloudFront控制台，对该分发创建全路径缓存失效（Invalidation），失效路径填写/*，等待失效完成后重新访问站点，即可加载S3上的最新代码。
• 长期优化：调整CloudFront的缓存规则，避免后续部署再次出现同类问题：
  • 对入口文件index.html配置缓存规则，设置Cache-Control: no-cache, no-store, must-revalidate，确保CloudFront每次都会从S3拉取最新的入口文件，获取最新的静态资源哈希引用。
  • 对构建时自动生成哈希后缀的JS、CSS、静态图片资源，设置1年的长缓存有效期。这类文件内容更新后文件名会自动变化，不会出现旧缓存命中问题，同时能大幅降低回源压力。

排查兜底 #

完成缓存失效后如果问题仍然存在，可以检查两个易遗漏的配置：

• 确认Angular生产构建流程没有错误加载环境文件，不存在代码内硬编码EC2公网地址的逻辑。
• 检查CloudFront的重定向规则，确认没有将前端API请求强制转发到EC2实例地址。

内容的提问来源于stack exchange，提问作者Luis Müller-Rehaag