title: Failed to execute 'fetch' on 'WorkerGlobalScope'
body: <p>I trying to fetch data from the server inside of a web worker. But in dev tools every time I got the same error.</p>
  
  <pre><code>Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from /api/books
  </code></pre>
  
  <p>I saw  <a href="https://stackoverflow.com/questions/48463483/what-causes-a-failed-to-execute-fetch-on-serviceworkerglobalscope-only-if">this</a> answer about service workers, but it's not working for me.</p>
  
  <p>WebWorker file code!</p>
  
  <pre><code>// data-handling.web-worker.js
  
  const workercode = () =&gt; {
    onmessage = async e =&gt; {
      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;
  </code></pre>
  
  <p>Imported in React component.</p>
  
  <pre><code>import data_handling_worker from "./data-handling.web-worker";
  const dataHandlingWorker = new Worker(data_handling_worker);
  </code></pre>
  
  <p>Running and posting messages inside of the hooks!</p>
  
  <pre><code>const [searchQuery, setSearchQuery] = useState('');
  const [booksList, setBooksList] = useState([]);
  
  useEffect(() =&gt; {
    dataHandlingWorker.postMessage(searchQuery);
  }, [searchQuery]);
  
  useEffect(() =&gt; {
    dataHandlingWorker.onmessage = (m) =&gt; {
      setBooksList(m.data);
    };
  }, []);
  </code></pre>