AWS Amplify托管Angular应用静态资源间歇性CORS问题排查

核心原因拆解 #

1. 重定向场景的CORS头缺失 #

错误日志里明确显示请求从https://myUrl.com重定向到https://www.myUrl.com，浏览器会检查最终重定向后的响应是否携带CORS头，而非初始请求的响应。即使你在customHttp.yml里配置了通配符规则，若Amplify的重定向规则未同步传递CORS头，或者规则未覆盖www域名下的资源路径，就会导致最终响应缺失Access-Control-Allow-Origin。

2. Angular服务工作者（NGSW）的缓存干扰 #

你的应用使用了Angular Service Worker（ngsw-worker.js），它会缓存静态资源。如果用户浏览器缓存了配置CORS头之前的旧资源，或者缓存的资源在重定向时未携带正确头信息，即使后续部署了新配置，用户仍会间歇性触发错误——直到缓存过期或被主动清除。

3. 504超时引发的连锁CORS错误 #

错误日志里同时出现504 Gateway Timeout，当请求触发网关超时，Amplify边缘节点可能不会返回任何CORS头，浏览器会直接抛出CORS错误（而非超时错误）。这种超时是间歇性的，和边缘节点负载、用户网络波动、地区CDN节点状态有关，因此仅部分用户会遇到。

仅部分用户触发的原因 #

• 缓存差异：不同用户的浏览器缓存周期、服务工作者版本不一致，部分用户仍持有旧缓存资源。
• 网络/CDN差异：部分地区的Amplify边缘节点负载过高，或用户ISP的域名解析存在延迟，更容易触发重定向或超时。
• NGSW更新延迟：Angular服务工作者的更新需要用户刷新页面或满足特定更新条件，部分用户未触发SW更新，仍使用旧的缓存逻辑。

遗漏配置与精准排查方法 #

1. 验证重定向规则的CORS传递 #

• 进入Amplify控制台的Rewrites and redirects页面，检查裸域到www的重定向规则，确保规则配置了自定义CORS头，或者customHttp.yml的规则覆盖www域名下的所有路径。
• 用curl测试重定向后的响应头：

  curl -v https://myUrl.com/assets/icons/telephone.svg
  

  确认最终响应的Access-Control-Allow-Origin是否存在。

2. 确保customHttp.yml生效 #

• 检查配置格式是否正确（单仓库场景）：

  customHeaders:
    - pattern: '**'
      headers:
        - key: 'Access-Control-Allow-Origin'
          value: '*'
        - key: 'Access-Control-Allow-Methods'
          value: 'GET, HEAD, OPTIONS'
  

• 重新部署后，在Amplify控制台的Cache management中手动刷新CDN缓存，避免旧缓存覆盖新配置。

3. 修正NGSW缓存策略 #

• 打开浏览器Application > Service Workers > Cache Storage，检查缓存的静态资源是否携带正确的CORS头。
• 修改ngsw-config.json，添加cacheableResponse规则，确保只有带CORS头的响应才被缓存：

  "assetGroups": [
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/**/*.svg", "/assets/**/*.png"]
      },
      "cacheableResponse": {
        "statuses": [200],
        "headers": {
          "Access-Control-Allow-Origin": "*"
        }
      }
    }
  ]
  

• 在应用中添加服务工作者更新检测逻辑，主动提示用户刷新页面以获取最新SW版本。

4. 排查504超时根源 #

• 在Amplify控制台Monitoring > Requests中筛选504状态码的请求，查看对应的边缘节点、用户地区，判断是否为CDN节点负载问题。
• 若超时频繁，联系AWS支持并提供报错时间、请求ID，排查边缘节点配置或链路问题。

临时缓解方案 #

• 统一静态资源的请求域名（要么全用www，要么全用裸域），移除重定向规则，从根源减少CORS触发场景。
• 指导受影响用户清除浏览器缓存和服务工作者（Application > Service Workers > Unregister）。

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