Angular应用部署后Service Worker注册失败：重定向不被允许

本地运行Angular应用时Service Worker正常工作，但部署到开发环境（分支URL：https://a.b.czoo.org/AB-123）后出现以下错误：

Service worker registration failed: SecurityError: Failed to register a ServiceWorker for scope ('https://a.b.czoo.org/') with script ('https://a.b.czoo.org/sw.js'):
The script resource is behind a redirect, which is disallowed.

注：项目通过Webpack的ts-loader和worker-loader将sw.ts编译为根目录下的sw.js，在app.component.ts中通过navigator.serviceWorker.register('/sw.js', { scope: '/' })完成注册。

可能的问题原因 #

• 部署路径不匹配：应用实际部署在子路径/AB-123/下，但注册时请求的是根路径/sw.js，服务器可能将根路径请求重定向到子路径，导致sw.js触发重定向。
• 服务器配置问题：服务器对/sw.js的请求返回3xx重定向状态码（如301/302），而Service Worker规范明确禁止使用经过重定向的脚本进行注册。
• Webpack输出配置错误：编译后的sw.js实际部署在/AB-123/sw.js，但注册代码仍指向根路径，服务器找不到资源从而触发重定向。
• 代理/CDN重定向规则：开发环境的反向代理或CDN存在自动重定向规则，将根路径的请求自动导向子路径分支。

调试方法 #

• 抓包看请求状态：打开浏览器开发者工具（F12）的Network面板，刷新页面，查看sw.js请求的状态码。如果是3xx，查看重定向的目标地址，确认是否和实际部署路径匹配。
• 验证脚本实际地址：直接在浏览器地址栏访问https://a.b.czoo.org/sw.js和https://a.b.czoo.org/AB-123/sw.js，确认哪个地址能正常返回Service Worker脚本内容。
• 调整注册路径：尝试修改注册代码，适配子路径部署：

  // 用相对路径注册，适配当前页面所在子路径
  navigator.serviceWorker.register('./sw.js', { scope: './' })
  // 或者明确指定子路径地址
  navigator.serviceWorker.register('/AB-123/sw.js', { scope: '/AB-123/' })
  

• 检查服务器规则：确认服务器是否存在将根路径/sw.js重定向到子路径的配置，修改规则确保/AB-123/sw.js可直接访问，避免不必要的重定向。
• 核对Webpack配置：检查worker-loader的输出设置和Webpack的publicPath配置，确保sw.js的输出路径和部署的子路径一致，比如动态设置publicPath为当前部署路径。

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