Question

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

在我的脑子部分，我有这段代码：

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？我该如何解决这个问题？

谢谢。

Answer 1

从本地文件运行脚本时，Chrome不允许您加载Web工作程序。

Answer 2

我使用了一种解决方法。 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'})));

Answer 3

问题已被Noble Chicken正确解释，但我有一个更通用的解决方案。您可以使用python导航到项目所在的文件夹，然后键入：python -m http.server

，而不是使用python安装wamp或xamp。

就是这样，你将在该文件夹上有一个正在运行的服务器，可以从localhost访问。

Answer 4

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

MacOsX示例：

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

更多信息：Web worker settings for chrome

Answer 5

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

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

安装local-web-server
$ npm install -g local-web-server

现在，您可以在要通过http访问内容的任何文件夹中使用它。

$ ws

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

Answer 6

我的帖子也有同样的问题。解决方案是您必须使用localhost（wamp或xamp）运行它。它会完成。

Answer 7

您需要一个Web服务器来处理来自HTTP协议的请求而不是本地文件并且正常工作：）

Answer 8

Chrome加载文件但无法运行。使用Firefox。它对我有用。

Answer 9

另一种解决方法是使用Google的web server for Chrome扩展程序。选择您的工作目录并启动服务器，完成！

Answer 10

Python 2.x比Python 3.x更广泛地部署，python -m SimpleHTTPServer 8000之类的东西更普遍适用，而不仅仅适用于Mac OS X.我发现它必须在Cygwin下使用。

有了这个，this example就像一个冠军。

Answer 11

function worker_fun(num){
    num ++
    // console.log(num)
    postMessage(num);
    setTimeout(worker_fun.bind(null,num), 500)
}

var w

function startWorker(){
    var blob = new Blob([
        "onmessage = function(e){\
            " + worker_fun.toString() + "\
            worker_fun(e.data.num);}"
    ]);
    var blobURL = window.URL.createObjectURL(blob);
    if (typeof(Worker) != 'undefined'){
        if (typeof(w) == 'undefined'){

            w = new Worker(blobURL);
            w.onmessage = function(event){
                document.getElementById('num').innerHTML = event.data;
            } 
            w.postMessage({
               num:parseInt(document.getElementById('num').innerHTML)})
        }
    }
}


function stopWorker() { 
    w.terminate();
    w = undefined;
}

如前所述，chrome不支持它。我喜欢在同一文件中定义我的工作人员。这是一种解决方法，每500毫秒将{的{1}}元素的innerHTML中增加一个数字。

Answer 12

使用Chrome创建本地http服务器的简便方法是

Chrome浏览器的Web服务器

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/related

说明：

Chrome的Web服务器使用HTTP从网络上的本地文件夹提供网页。脱机运行。   Chrome的Web服务器是Chrome的开源（MIT）HTTP服务器。

它可以在安装了Chrome的任何地方运行，因此可以随身携带。它甚至可以在ARM chromebook上使用。

它现在可以选择在本地网络上侦听，以便其他计算机可以访问您的文件。此外，它可以尝试获取Internet地址。

许多人使用它在chromebook上进行基本的Web开发。在计算机之间甚至在Internet上通过本地网络共享文件也很方便。

安装后，导航至http://127.0.0.1:8887

它不是不安全的标志-允许文件访问文件

Answer 13

这是受托马斯上述回答的启发。但有一个警告我只想分发HTML，所以我manually converted the js to dataURL。并启用其中的数据URL复选框。

const myWorker = new Worker("data:application/x-javascript;base64,b25tZXNzYW...");

Answer 14

是的，如果您正在加载本地文件，它将无法在chorome中使用。但它在firefox浏览器中运行良好。您必须在HTML文件中添加以下代码。

<head>
    <meta charset="UTF-8" />
</head>

Chrome无法加载网络工作者

14 个答案: