跨域CDN的WebWorker通过Blob加载时importScripts报错如何解决？

这个报错是Blob Worker的源规则和跨源资源共享(CORS)策略共同作用导致的：

• Blob URL生成的Worker的全局作用域源继承自创建Blob的页面源（也就是你的站点域名https://www.**.com），调用importScripts加载CDN域名下的资源属于跨源请求，需要CDN返回合法的CORS响应头才能正常执行。
• 你看到网络面板、Sources面板显示资源加载成功，同时Worker正常运行，是因为第一次importScripts请求实际已经成功拉到了脚本内容并执行，报错通常来自打包工具自动注入的依赖chunk加载逻辑、或者代码逻辑中的重复importScripts调用，第二次请求时CDN没有返回正确的CORS头就会抛出该异常，但不影响已经加载完成的Worker逻辑运行。

• 方案1：配置CDN的CORS规则
  给所有Worker相关的js资源添加CORS响应头，确保响应头包含Access-Control-Allow-Origin: *（或者你的站点域名），且CDN对所有GET请求都返回CORS头，不要仅针对OPTIONS预检请求返回。
• 方案2：取消Blob包裹逻辑，直接用原生跨源Worker配置
  目前主流浏览器都支持原生Worker的跨源配置，不需要用Blob包裹importScripts的逻辑，修改重写代码即可：

var _Worker = window.Worker;
window.Worker = function (url, opts) {
    return new _Worker(url, {
        ...opts,
        crossOrigin: 'anonymous'
    });
};

• 方案3：预拉取脚本内容生成Blob
  如果必须使用Blob方案，可以提前把CDN的Worker脚本内容拉取到本地后再生成Blob，从根源上避免importScripts跨源问题：

var _Worker = window.Worker;
window.Worker = async function (url, opts) {
    const scriptRes = await fetch(url, {
        credentials: 'same-origin'
    });
    const scriptContent = await scriptRes.text();
    const blob = new Blob([scriptContent], {
        type: 'text/javascript'
    });
    return new _Worker(URL.createObjectURL(blob), opts);
};

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