跨域Worker加载ES模块运行报错如何正确配置修复

两次报错本质是实现逻辑和Worker运行环境的API规则冲突：

• 未加type: 'module'时创建的是经典Worker，这个环境只认importScripts()加载脚本，根本不支持ES模块的import语法，所以报Cannot use import statement outside a module
• 加上type: 'module'后Worker跑在ES模块模式下，这个环境从规范上就禁用了importScripts()，所以又报cannot use 'importScripts()' with modules
• 顺带提一句，你贴的module配置代码有语法错误：{type: 'module')少了闭合的花括号，正确写法是{ type: 'module' }

跨域加载ES模块Worker绕不开浏览器的CORS限制，必须先满足一个前提：

• 存a.worker.js的跨域服务器，要给a.worker.js以及它所有依赖的脚本（比如示例里的scan.js）配好CORS响应头，允许你当前页面的源访问，不然模块请求会直接被拦截。如果跨域服务器改不了CORS配置，只能自己搭服务端代理把这些脚本转成同域资源，没有别的歪路可走。

你用Blob绕Worker初始脚本同源限制的思路是对的，只要把Blob里的经典Worker写法换成ES模块写法就行，不用importScripts，直接用ES模块的import加载目标Worker：

const url = new URL('./worker/a.worker.js', import.meta.url);
// Blob内用ES模块的副作用导入加载目标跨域Worker
const workerBlob = new Blob(
  [`import ${JSON.stringify(url.toString())};`],
  { type: 'application/javascript' }
);
const blobUrl = window.URL.createObjectURL(workerBlob);
// 修正语法错误，指定Worker为module类型
this.WasmVisionWorker = new Worker(blobUrl, { type: 'module' });

• 这个方案里，Worker的初始入口是你生成的同域Blob URL，完全符合Worker的同源策略要求
• Blob里import跨域Worker的流程走标准CORS校验，只要跨域资源CORS配置正确就能正常加载
• a.worker.js内部写的相对路径import（比如import scan from '../scan.js'）是基于a.worker.js自身的真实URL解析的，和Blob URL没关系，原有相对路径逻辑不用改。

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