Chrome 无法加载网络工作者

IT技术 javascript google-chrome web-worker
2021-01-16 05:49:30

我正在开发一个使用网络工作者的项目。

在我的头部部分，我有这个代码：

var worker = new Worker("worker.js");
// More code

这在 Safari 中工作正常，但 Chrome 报告以下错误：

Uncaught SecurityError: Failed to create a worker: script at '(path)/worker.js' cannot be accessed from origin 'null'.

为什么这在 Safari 中可以完美运行，而在 Chrome 中却不能？我该如何解决？

谢谢你。

6个回答

从本地文件运行脚本时，Chrome 不允许您加载 Web Worker。

Firefox 仍然有效（来自 file://），Chrome 在这种情况下无效。
2021-03-21 05:49:30
根据这个答案，Loading a local file, even with a relative URL, is the same as loading a file with the file: protocol.-- 网页能够随心所欲地访问您的文件系统并不酷。
2021-04-12 05:49:30
-1 firsfox 当然会让你这样做，前提是你也使用文件作为源（例如，你在浏览器中查看本地文件）。只是铬坏了。
2021-04-14 05:49:30

我使用了一种解决方法。Chrome 会阻止Worker但不会阻止<script>. 因此，制定通用解决方案的最佳方法是：

function worker_function() {
    // all code here
}
// This is in case of normal worker start
// "window" is not defined in web worker
// so if you load this file directly using `new Worker`
// the worker code will still execute properly
if(window!=self)
  worker_function();

然后像往常一样链接它<script src="..."。一旦定义了函数，您就可以使用这种令人厌恶的代码：

new Worker(URL.createObjectURL(new Blob(["("+worker_function.toString()+")()"], {type: 'text/javascript'})));
我应该注意，您不能从像这样编写的工作人员那里使用 importScript。至少，并非没有额外的解决方法。因此，您需要对多文件工作者进行更多篡改。
2021-03-19 05:49:30
我不是 js 开发人员，也没有理解此处使用脚本标记的要点。窗口 != self check 是什么？有人可以解释一下这个加载顺序吗？谢谢。
2021-03-24 05:49:30
这个解决方案很好。为什么这个世界上没有什么是完美的？每个软件都在用错误、缺陷、幼稚的行为等来激怒用户。Firefox 也很傲慢，因为它拒绝支持“剪辑路径”css 属性。
2021-03-28 05:49:30
@treeseal7 应该在 Web Worker 上下文中执行的代码。
2021-04-06 05:49:30
我也注意到了这一点，但是将变量字符串化以传递 (json)var json = JSON.stringify(xJsonArgs);而不是像new Worker(URL.createObjectURL(new Blob([(${xFunction.toString()})(${json})这样的传递], { type: 'text/javascript' })));对我有用。感谢您的答复。
2021-04-12 05:49:30

Noble Chicken已经正确解释了这个问题，但我有一个更通用的解决方案。无需安装 wamp 或 xamp，您可以使用 python 导航到项目所在的文件夹并键入：python -m http.server

就是这样，您将在该文件夹上有一个正在运行的服务器，可从本地主机访问。

您还可以安装 http-server 节点module，然后从终端导航到所需的文件夹并运行“http-server -p 3000”。
2021-03-16 05:49:30
也试试 php -S localhost:8000
2021-03-16 05:49:30
Mac 可能需要使用，python -m SimpleHTTPServer 8000因为它们装有 < Python 3（只是为了保存另一个谷歌搜索：D）
2021-03-18 05:49:30
值得一提的是这个脚本“python -m http.server”需要Python 3。
2021-03-27 05:49:30

您还可以在启动 Chrome 时使用--allow-file-access-from-files标志。

MacOsX 示例：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

更多信息：chrome 的网络工作者设置

是的，另一个选项也可以是在其清单中使用正确的权限对 Chrome 扩展程序进行编码：“permissions”: ["file://*/*"]，就像在stackoverflow.com/questions/19493020/...
2021-03-20 05:49:30
注意：“您必须先关闭 Chrome 的所有窗口，然后才能在开启--allow-file-access-from-files标志的情况下打开它。” 如stackoverflow.com/a/21771754/325418 上所述
2021-03-27 05:49:30
哦，从链接的问题中，记得在使用标志启动之前关闭所有 Chrome 窗口。
2021-04-04 05:49:30
在 windows 命令窗口导航到：“C:\Users\NAME\AppData\Local\Google\Chrome SxS\Application”，然后运行 ​​chrome.exe --allow-file-access-from-files，然后复制你的本地文件路径例如 c:\temp\myWeb\index.html 并粘贴到打开的浏览器的 url 中，完成。
2021-04-08 05:49:30
您还可以创建快捷方式并在目标路径中传递标志。
2021-04-08 05:49:30

这是因为安全限制。您需要使用http://或https://协议而不是file:///.

如果您安装了 NodeJS，则只需执行以下操作即可。 - 请注意，这是许多可用选项之一

安装本地网络服务器

$ npm install -g local-web-server

现在，您可以在要通过http.

$ ws

导航到http://localhost:8000（默认端口：8000）

其它你可能感兴趣的问题
上一篇使用 fetch 进行基本身份验证？ 下一篇使用 jQuery 创建表 - 追加