问题描述
在开发使用 Web Workers 的前端应用程序时，我们可能会遇到浏览器无法正确加载 Web Workers 的情况。其中最常见的是，Google Chrome 浏览器无法加载 Web Workers，并显示以下错误消息：
Uncaught DOMException: Failed to construct 'Worker': Script at 'file:///path/to/worker.js' cannot be accessed from origin 'null'.
这个错误表明了一个安全限制：Chrome 不允许从本地文件系统加载 Web Workers。
解决方案
方案一：通过 HTTP 服务器加载 Web Workers
要解决这个问题，我们需要将本地文件系统上的 Web Worker 脚本放到一个支持 HTTP 协议的服务器上，然后通过 HTTP 访问该脚本。这样可以绕过 Chrome 的安全限制，使其能够正确加载 Web Workers。
例如，如果你已经安装了 Node.js，你可以使用以下命令来启动一个简单的 HTTP 服务器：
$ npm install -g http-server $ cd /path/to/webapp $ http-server .
然后，在你的应用程序中，将 Web Worker 脚本路径指定为 HTTP URL，而不是本地文件系统路径：
var worker = new Worker('http://localhost:8080/worker.js');注意，这种方法并不适用于所有场景。对于一些只需要临时使用 Web Workers 的开发者来说，这种方法可能过于繁琐。幸运的是，还有另一种更加简便的方案。
方案二：使用 Blob URL
如果你只是想临时测试一下 Web Workers，那么方案一可能会让你觉得过于繁琐。在这种情况下，你可以使用 Blob URL 来加载 Web Worker 脚本。
Blob URL 是一种基于内存的 URL，它可以让我们将一个字符串或者二进制数据转变为一个 URL。通过这个 URL，我们就可以在 Web Worker 中加载所需的脚本，而无需将脚本放到服务器上。
以下是一个使用 Blob URL 加载 Web Worker 的示例代码：
-- -------------------- ---- -------
--- ------------ - -
-------------------------------- --------------- -
-- -- ---- -------
------------------ ------- ------- ---
---
--
--- ---- - --- -------------------- - ----- ------------------------ ---
--- --- - --------------------------
--- ------ - --- ------------
---------------- - --------------- -
------------------- ------- ------------
--
-------------------------- ----------在这个示例中，我们首先定义了要在 Web Worker 中执行的脚本，然后使用 new Blob() 方法将其转换为一个 Blob 对象。接着，我们调用 URL.createObjectURL() 方法将该 Blob 对象转换成一个 Blob URL，并将其作为参数传递给 new Worker() 方法，以加载 Web Worker。
结论
在本文中，我们介绍了两种解决 Chrome 无法加载 Web Workers 的方法，分别是使用 HTTP 服务器和使用 Blob URL。这两种方法都有各自的优点和缺点，具体取决于你的应用场景。但无论你选择哪种方法，都可以让你的应用程序正确地加载 Web Workers，并发挥出其所拥有的强大功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12397