service worker 默认不建议缓存跨域请求，应通过 origin 对比只缓存同源资源；跨域资源需跳过拦截，交由浏览器原生 http 缓存处理，确需缓存时须校验 cors 头与响应类型。

Service Worker 默认不建议缓存跨域请求，因为这可能带来安全风险或行为不可控。实际开发中，应主动识别并跳过跨域资源，只对同源静态资源做可靠缓存。

明确区分同源与跨域请求
在 fetch 事件中，通过 new URL(request.url).origin 与 self.location.origin 对比判断是否同源：

• 若两者不一致（如请求 CDN 图片、第三方 API），直接放行不拦截
• 只对同源请求（如 /styles.css、/api/user）执行缓存逻辑

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  // 跳过跨域请求
  if (url.origin !== self.location.origin) {
    return;
  }
  // 后续只处理同源请求
});

避免缓存非同源资源的常见误区

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

• 不要对 event.request.destination === 'script' 或 'font' 等类型盲目缓存，需先验 origin
• 第三方字体（如 Google Fonts）、CDN JS、外部图片即使能 fetch 成功，也不应写入 cache —— 它们不受你控制，版本变更或下线会导致缓存失效甚至页面异常
• 浏览器本身会对部分跨域资源做 HTTP 缓存（如带 Cache-Control 的 CDN 资源），Service Worker 不必介入

特殊场景：确需缓存跨域资源时的注意事项
仅限极少数可控情况（如内部微前端子应用部署在不同子域但信任同一团队）：

• 必须确保响应头含 Access-Control-Allow-Origin（否则 cache.put 会失败）
• 缓存前检查 response.ok 和 response.type === 'basic'（跨域响应 type 为 cors，不能直接 put）
• 更稳妥做法是代理到同源路径（如 /proxy/fonts/xxx.woff2），由后端转发并注入 CORS 头

推荐策略组合

• 静态资源（HTML/CSS/JS/图片）：同源 + Cache First
• API 请求：同源 + Network First 或 Stale-While-Revalidate
• 所有跨域请求：不缓存，交由浏览器原生机制处理

本质上，Service Worker 的缓存能力是为增强自身站点体验服务的，不是通用代理。守住同源边界，才能保证缓存稳定、可维护、可预测。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南