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;
}
// 后续只处理同源请求
});避免缓存非同源资源的常见误区
- 不要对
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免费学习笔记（深入）”；
