无法在'WorkerGlobalScope'上执行'提取'

Question

我试图从网络工作者内部的服务器中获取数据。但是在开发工具中，每次遇到相同的错误。

Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from /api/books

我看到了this关于服务人员的答案，但它对我不起作用。

WebWorker文件代码！

// data-handling.web-worker.js

const workercode = () => {
  onmessage = async e => {
    const res = await fetch('/api/books');

    postMessage(res);
  }
};

let code = workercode.toString();
code = code.substring(code.indexOf('{')+1, code.lastIndexOf('}'));

const blob = new Blob([code], {type: 'application/javascript'});
const worker_script = URL.createObjectURL(blob);

export default worker_script;

已导入React组件。

import data_handling_worker from "./data-handling.web-worker";
const dataHandlingWorker = new Worker(data_handling_worker);

在挂钩内运行和发布消息！

const [searchQuery, setSearchQuery] = useState('');
const [booksList, setBooksList] = useState([]);

useEffect(() => {
  dataHandlingWorker.postMessage(searchQuery);
}, [searchQuery]);

useEffect(() => {
  dataHandlingWorker.onmessage = (m) => {
    setBooksList(m.data);
  };
}, []);

Answer 1

从blob:// URI创建的工作人员的baseURI set to set to that blob:// URI。

要获取相对URL，浏览器首先必须从当前领域的baseURI构建绝对URI。

因此，在您的情况下，浏览器将尝试以blob://为基础从baseURI生成绝对URL。 这就是抛出的内容：

/api/books

要解决该问题，您有两个选择：

• 使用绝对URL。这样，您就不会面对这个问题。

• 将blob:[origin]/[UUID]从主线程传递到Worker的脚本。这样，您就可以使用

  const worker_script = `
    postMessage( { baseURI: self.location.href } );
    try {
      const absolute = new URL( "api/books", self.location.href );
    }
    catch( err ) {
      postMessage( { err: err.toString() } );
    }
  `;
  const worker_url = URL.createObjectURL( new Blob( [ worker_script ] ) );
  const worker = new Worker( worker_url );
  worker.onmessage = (evt) => console.log( evt.data );

  自己创建绝对URL。

第一个选项非常简单，因此我想您不需要示例。第二，由于我们无法在StackSnippets中托管相关文件，因此baseURI。

这里是代码：

URL constructor