能否跨源注册Service Worker？如何结合Fetch API使用跨域Service Worker

嘿，我来帮你理清楚怎么结合Fetch API使用跨域CDN托管的Service Worker。这里有几个核心要点和步骤，咱们一步步来：

跨域托管的Service Worker能正常工作的第一步，是你的CDN必须返回正确的CORS和Service Worker相关响应头，缺一不可：

• Access-Control-Allow-Origin：设置为你的页面域名（比如https://your-app.com），生产环境别用*，不然带凭证的请求会失败。
• Service-Worker-Allowed：指定这个Service Worker能控制的页面范围，比如你的页面在根目录就设为/，必须和你注册时的scope参数一致。
• Content-Type：确保Service Worker脚本的响应头是application/javascript，不然浏览器不认。
  另外，CDN得允许OPTIONS请求（浏览器会先发预检请求），所以OPTIONS请求的响应头也要包含上面的CORS信息。

注册的时候要明确指定跨域脚本地址和匹配的scope，代码示例如下：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register(
        'https://your-cdn-domain.com/sw.js', // 你的CDN上的Service Worker地址
        {
          scope: '/', // 必须和CDN的Service-Worker-Allowed值一致
          type: 'classic' // 如果你的SW是普通脚本用classic，ES模块就用module
        }
      );
      console.log('Service Worker注册成功:', registration);
    } catch (error) {
      console.error('Service Worker注册失败:', error);
      // 常见失败原因：CDN头没配对、scope不匹配、HTTPS环境问题（localhost除外）
    }
  });
}

注册成功后，Service Worker就能拦截页面的请求了，用Fetch API处理跨域资源时注意这几点：

1. 默认的fetch()模式就是cors，所以普通跨域请求直接用就行；如果需要携带Cookie、HTTP认证等凭证，要加上credentials: 'include'，同时后端的CORS头也要设置Access-Control-Allow-Credentials: true。
2. 可以结合Cache API实现离线缓存，比如缓存跨域的静态资源或者API响应。

给你个SW里的Fetch拦截示例：

self.addEventListener('fetch', (event) => {
  // 拦截跨域API请求
  if (event.request.url.startsWith('https://api.third-party.com/')) {
    event.respondWith(
      fetch(event.request, {
        credentials: 'include' // 如果需要带凭证就加这个，否则可省略
      })
      .then(response => {
        // 可选：把响应缓存起来，下次离线时用
        caches.open('api-cache').then(cache => {
          cache.put(event.request, response.clone());
        });
        return response;
      })
      .catch(() => {
        // 请求失败时返回缓存的 fallback 内容
        return caches.match('/fallback-api-response.json');
      })
    );
  }

  // 拦截CDN上的静态资源并缓存
  if (event.request.url.startsWith('https://your-cdn-domain.com/assets/')) {
    event.respondWith(
      caches.match(event.request)
        .then(cachedRes => cachedRes || fetch(event.request).then(networkRes => {
          caches.open('static-assets').then(cache => cache.put(event.request, networkRes.clone()));
          return networkRes;
        }))
    );
  }
});

• 跨域SW的scope不能超过CDN设置的Service-Worker-Allowed范围，比如CDN设的是/app/，你注册时就不能用/当scope。
• 必须在HTTPS环境下测试（localhost除外），浏览器不允许在HTTP环境下注册跨域Service Worker。
• 如果你的SW用了ES模块（比如import语法），注册时要把type设为module，同时CDN要正确处理模块脚本的MIME类型。

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