Angular集成ServiceWorker后丢失Origin请求头引发CORS问题的解决方法

我之前也碰到过一模一样的情况——注册Angular ServiceWorker后，跨域API请求的Origin头直接消失，导致服务器不返回CORS响应头，触发浏览器错误。问题的核心在于Angular ServiceWorker的默认缓存策略会修改请求的处理模式，哪怕你用Fetch显式设置mode: 'cors'也会被SW覆盖。下面是我验证有效的解决方案：

1. 配置ngsw-config.json排除API请求的缓存干预 #

Angular ServiceWorker的行为完全由ngsw-config.json控制，我们需要为跨域API请求单独配置数据组，确保SW不修改请求的CORS模式：

修改ngsw-config.json的dataGroups字段 #

在配置文件中添加针对你的API域名的规则，使用freshness策略（优先请求网络，不缓存），这样SW会直接转发请求，不会干扰浏览器的CORS处理：

{
  "index": "/index.html",
  "assetGroups": [
    // 保留你原有的静态资源缓存配置
  ],
  "dataGroups": [
    {
      "name": "api-cross-domain",
      "urls": [
        "https://some-server.asurewebsites.net/api/**" // 匹配你的所有API路径
      ],
      "cacheConfig": {
        "strategy": "freshness", // 优先网络请求，不缓存响应
        "maxSize": 0, // 不缓存任何响应
        "maxAge": "0u", // 缓存有效期为0
        "timeout": "5s" // 超时后才使用缓存（这里设为0也可以）
      }
    }
  ]
}

为什么这个配置有效？ #

• freshness策略会让SW直接将请求转发到网络，不会对请求的mode、headers等做修改，浏览器会自动发送Origin头。
• 设置maxSize: 0和maxAge: "0u"确保不会缓存API响应，避免后续请求从缓存读取而跳过CORS检查。

2. 部署并刷新ServiceWorker #

配置修改完成后，需要重新构建你的Angular应用：

ng build --prod

部署新的构建文件后，在浏览器中：

• 打开开发者工具 → Application → Service Workers
• 点击Unregister注销旧的SW
• 刷新页面，新的SW会加载并应用新的配置

3. 验证请求行为 #

刷新后发起API请求，在Network面板中检查：

• 请求头是否包含Origin字段
• 响应头是否返回Access-Control-Allow-Origin
• 不再出现No 'Access-Control-Allow-Origin' header is present错误

针对你尝试过的方案的补充说明 #

• 手动设置Origin头：浏览器出于安全限制，不允许前端脚本修改Origin头，这个操作本身就是无效的，所以会报错Refused to set unsafe header "Origin"。
• Fetch API设置mode: 'cors'：因为ServiceWorker拦截了请求并修改了处理模式，所以你的显式设置会被SW覆盖，必须通过ngsw-config.json让SW不干涉这些请求。

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