跨域worker url，如何使其工作?

Question

我一直在尝试使跨域工作人员url工作，这可能是一个重复的问题，但我无法使任何解决方案的工作，这是我正在做的:

const url = new URL('./worker/a.worker.js', import.meta.url);
const workerBlob = new Blob([
'importScripts(' + JSON.stringify(url) + ')',
], { type: 'application/javascript' });
const blobUrl = window.URL.createObjectURL(workerBlob);
this.WasmVisionWorker = new Worker(blobUrl);

抛出错误- *

不能在....的模块外使用import语句

基本上，在我的工作器中，我使用ES6 'import'导入不同的脚本例如

import scan from '../scan.js';

我读这里- ES模块在服务工作者

要使用import语句，我们必须在创建新的worker时提供- type: 'module':

this.WasmVisionWorker = new Worker(blobUrl, {type: 'module');

有了这个，得到错误-不能使用'importScripts()'与模块，应该与此相关:

const workerBlob = new Blob(['importScripts(' + JSON.stringify(url) + ')',
], { type: 'application/javascript' });

我做错了什么?

Answer 1

如果您的worker脚本确实存储在另一个域中，那么您的"加载器"脚本应该看起来像加载模块脚本是

import "${ url }";

所有的

const url = new URL('./worker/a.worker.js', import.meta.url);
const workerBlob = new Blob([`import "${ url }"`], { type: 'text/javascript' });
const blobUrl = window.URL.createObjectURL(workerBlob);
this.WasmVisionWorker = new Worker(blobUrl, { type: 'module' });

这将作为模块脚本加载脚本。

但是请注意，您的脚本必须与适当的Access-Control-Allow-Origin头一起发送才能正常工作(在非Worker环境中也是如此)。