Service Worker加载CDN等外部资源失败问题求助

你的报错核心原因有两个：

• 使用no-cors模式获取的是opaque响应，这种响应的ok属性永远为false，所以代码里if (fetchResponse.ok)的分支永远不会执行，最终async函数没有返回任何值（相当于返回undefined），而respondWith()必须接收一个合法的Response对象，这就触发了报错。
• 不管请求成功还是失败，你都需要确保respondWith()能拿到有效的Response，不能让函数无返回值。

解决方案1：跳过CDN资源的Service Worker拦截（推荐） #

既然你不需要缓存CDN资源，最简单的办法就是不对这类请求做拦截，直接交给浏览器原生处理：

self.addEventListener("fetch", event => {
  // 根据实际CDN域名调整判断规则，这里以cdnjs为例
  const isCdnRequest = event.request.url.startsWith("https://cdnjs.cloudflare.com/");
  
  if (isCdnRequest) {
    // 直接跳过Service Worker处理，让浏览器发起原生请求
    return;
  }

  // 这里保留你本地资源的处理逻辑（如果需要）
  event.respondWith((async () => {
    const response = await fetch(event.request);
    return response;
  })());
});

解决方案2：正确处理no-cors模式的响应 #

如果必须通过Service Worker处理CDN请求，去掉ok判断直接返回响应即可。opaque响应虽然无法读取内容，但浏览器可以正常加载JS、CSS这类资源：

self.addEventListener("fetch", event => {
  event.respondWith((async () => {
    // 仅对CDN请求启用no-cors模式，其他请求正常处理
    const fetchOptions = event.request.url.startsWith("https://cdnjs.cloudflare.com/") 
      ? { mode: "no-cors" } 
      : {};

    const fetchResponse = await fetch(event.request, fetchOptions);
    // 直接返回响应，no-cors模式下ok属性无参考意义
    return fetchResponse;
  })());
});

关键注意点 #

• no-cors模式仅适用于加载浏览器可直接解析的资源（脚本、样式、图片等），不能用于需要读取响应内容的场景（比如JSON数据）。
• 必须保证respondWith()始终接收到Response对象，不能让处理函数无返回值，否则必然触发报错。

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