Workbox仅在关闭CORS时注册路由问题求助

• 检查Service Worker作用域配置
  Chrome开启安全策略时，SW的作用域默认受限于其文件所在路径。如果你的SW注册路径是/static/sw.js，作用域会被限制在/static/下，非该路径的路由请求不会被捕获。
  确认注册代码显式指定根作用域：

  navigator.serviceWorker.register('/sw.js', { scope: '/' })
  

  若SW文件不在根目录，需在服务器端设置Service-Worker-Allowed响应头，允许更大的作用域。

• 验证路由请求的匹配条件
  React单页刷新时发起的是导航请求（request.mode === 'navigate'），Workbox默认的路由匹配可能未明确针对这类请求。调整匹配函数：

  registerRoute(
    ({ request }) => request.mode === 'navigate',
    new NetworkFirst({ cacheName: 'nav-cache' })
  );
  

  开启安全策略时，跨域限制可能影响请求的mode标识，导致原有匹配逻辑失效。

• 确保缓存策略兼容CORS规则
  若React静态资源和Django后端存在跨域（比如端口不同），Chrome安全策略会限制SW读取缓存资源。在Workbox预缓存配置中指定请求模式：

  workbox.precaching.precacheAndRoute(self.__WB_MANIFEST, {
    fetchOptions: { mode: 'cors' }
  });
  

  同时配置Django返回Access-Control-Allow-Origin等CORS响应头，允许SW所在域名访问资源。

• 清除Chrome的SW缓存隔离数据
  Chrome安全策略会严格隔离不同来源的SW缓存。若开发环境混用localhost和自定义域名，可能导致旧缓存干扰。在Chrome开发者工具Application -> Service Workers中点击Unregister清除缓存，重新注册SW。

• 排查请求是否被SW捕获
  在SW的fetch事件最外层添加日志，确认请求是否到达SW：

  self.addEventListener('fetch', (event) => {
    console.log('捕获到请求:', event.request.url);
    // 原路由匹配逻辑
  });
  

  若无日志输出，问题出在作用域或注册配置；若有日志，再检查路由匹配函数的条件是否正确。

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