Web Workers无法直接加载跨域脚本，需通过fetch获取支持CORS的远程脚本（如jsDelivr），转为Blob后用URL.createObjectURL创建同源Blob URL来实例化Worker，并建议及时revokeObjectURL释放内存。
Web Workers 不能直接加载跨域脚本，这是浏览器同源策略的硬性限制。最常用且兼容性较好的绕过方式，是用 Blob URL 把远程脚本内容“本地化”，让 Worker 加载的是同源的 Blob 地址，而非原始 CDN 链接。
前提条件：CDN 必须支持 CORS
要成功 fetch 到远程脚本，目标地址（如 jsdelivr、unpkg 等）响应头中必须包含有效的 Access-Control-Allow-Origin。否则 fetch 阶段就会失败，后续无从谈起。
- 常见支持 CORS 的 CDN：jsDelivr、unpkg、cdnjs（部分版本）、Skypack
- 可手动检查：在浏览器开发者工具 Network 标签页中查看该 JS 请求的 Response Headers，确认存在
Access-Control-Allow-Origin: *或具体域名 - 不支持 CORS 的私有 CDN 或静态托管服务（如某些 Nginx 默认配置）需先补全响应头
核心实现：fetch + Blob + createObjectURL
把远程脚本内容拉取为字符串或 Blob，再构造一个临时 URL 供 Worker 使用。这种方式完全避开网络路径校验，只依赖主线程已通过 CORS 的 fetch 结果。
- 推荐用
response.blob()而非response.text()，减少字符编码转换风险，尤其对压缩/混淆脚本更稳妥 - 创建 Worker 时传入
URL.createObjectURL(blob)，不是原始 URL - 示例代码：
<script>
async function loadWorkerFromCDN() {
try {
const resp = await fetch('https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js');
if (!resp.ok) throw new Error('Script load failed');
const blob = await resp.blob();
const url = URL.createObjectURL(blob);
const worker = new Worker(url);
// 后续可监听 onmessage、postMessage 等
return { worker, cleanup: () => URL.revokeObjectURL(url) };
} catch (err) {
console.error('Failed to init worker:', err);
}
}
</script>
注意事项与边界情况
这个方案看似简单，但几个关键细节容易导致运行时失败或内存问题：
立即学习“前端免费学习笔记（深入）”；
-
不支持 importScripts 动态加载：Worker 内部若调用
importScripts('xxx.js')，仍会触发跨域报错——因为那是 Worker 自己发起的请求。所有依赖必须提前内联进初始脚本，或改用fetch + eval（不推荐） -
Blob URL 是一次性且不可复用的：每次调用
createObjectURL都生成新地址；不同 Worker 实例不能共用同一 URL -
建议主动清理：Worker 终止后调用
URL.revokeObjectURL(url)，避免长期占用内存（虽现代浏览器会自动回收，但显式释放更稳妥） -
Safari 和旧版 Edge 兼容性略弱：极少数版本对 Blob URL 初始化 Worker 报
SecurityError，如有必要可降级为同源预置脚本 + 构建时打包
替代思路：构建时处理更稳定
如果项目使用 Webpack、Vite 或 Rollup，优先考虑构建阶段解决跨域问题，比运行时 Blob 更可靠：
- Webpack：配合
worker-loader或内置module.rules中的type: 'asset/resource'，把 Worker 脚本打到同源输出目录 - Vite：直接
new Worker(new URL('./worker.js', import.meta.url))，Vite 自动处理为内联或同源地址 - 优势：无 CORS 依赖、可 Tree-shaking、支持动态 import、调试友好
