Chrome ne peut pas charger le web worker

Je travaille sur un projet qui utilise un web worker.

Dans ma section principale, j'ai ce code:

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

Cela fonctionne bien dans Safari, mais Chrome signale l'erreur suivante:

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

Pourquoi cela fonctionne-t-il parfaitement dans Safari mais pas dans Chrome? Comment puis-je réparer ça?

Je vous remercie.

Chrome ne vous permet pas de charger des collaborateurs Web lors de l'exécution de scripts à partir d'un fichier local.

J'utilise une solution de contournement. Chrome bloque Workermais pas <script>. La meilleure façon de créer une solution universelle est donc la suivante:

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();

Vous le liez ensuite comme d'habitude <script src="...". Et une fois la fonction définie, vous utilisez cette abomination de code:

new Worker(URL.createObjectURL(new Blob(["("+worker_function.toString()+")()"], {type: 'text/javascript'})));

Le problème a été correctement expliqué par Noble Chicken mais j'ai une solution plus générale pour cela. Au lieu d'installer wamp ou xamp, avec python, vous pouvez accéder au dossier dans lequel votre projet est hébergé et taper:python -m http.server

Juste cela et vous aurez un serveur en cours d'exécution sur ce dossier, accessible à partir de l'hôte local.

Vous pouvez également utiliser l' indicateur --allow-file-access-from-files lorsque vous lancez Chrome.

Exemple pour MacOsX:

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

Plus d'informations: Paramètres de l'agent Web pour Chrome

C'est à cause des restrictions de sécurité. Vous devez utiliser http://ou https://protocole au lieu de file:///.

Si NodeJS est installé, vous pouvez simplement faire ce qui suit. - Notez que c'est l'une des nombreuses options disponibles

Installer le serveur Web local

$ npm install -g local-web-server

Vous pouvez maintenant l'utiliser dans n'importe quel dossier par lequel vous souhaitez accéder au contenu http.

$ ws

Accédez à http://localhost:8000(port par défaut: 8000)

J'ai eu le même problème que votre message aussi. La solution est que vous devez l'exécuter avec localhost (wamp ou xamp). Ce sera fait.

Une autre solution de contournement consiste à utiliser le serveur Web de Google pour l' extension Chrome . Choisissez votre répertoire de travail et démarrez le serveur, c'est fait!

vous avez besoin d'un serveur Web pour la demande du protocole HTTP au lieu d'un fichier local et fonctionne correctement :)

Chromecharge le fichier mais ne peut pas l'exécuter. Utilisez Firefox. Ça marche pour moi.

Un moyen facile de créer un serveur http local dans ChromeCette application est un :

Serveur Web pour Chrome

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

La description:

Un serveur Web pour Chrome sert des pages Web à partir d'un dossier local sur le réseau, en utilisant HTTP. Fonctionne hors ligne. Web Server for Chrome est un serveur HTTP open source (MIT) pour Chrome.

Il fonctionne partout où Chrome est installé, vous pouvez donc l'emporter n'importe où. Cela fonctionne même sur les Chromebooks ARM.

Il a maintenant la possibilité d'écouter sur le réseau local, afin que d'autres ordinateurs puissent accéder à vos fichiers. De plus, il peut essayer d'obtenir une adresse Internet.

De nombreuses personnes l'utilisent pour faire du développement Web de base sur un Chromebook. Il est également pratique pour partager des fichiers sur un réseau local entre des ordinateurs, ou même sur Internet.

Une fois que vous l'avez installé, accédez à http://127.0.0.1:8887

Et ce n'est pas non plus sécurisé car flag --allow-file-access-from-files

Ceci est inspiré par la réponse de Thomas ci-dessus. Mais avec une mise en garde que je voulais distribuer uniquement le HTML, j'ai donc converti manuellement les js en dataURL . et en activant la case à cocher URL des données.

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

Avec Python 2.x étant plus largement déployé que Python 3.x, quelque chose comme python -m SimpleHTTPServer 8000est plus généralement applicable, et pas seulement pour Mac OS X. Je l'ai trouvé nécessaire pour une utilisation sous Cygwin, par exemple.

Avec cela en place, cet exemple a fonctionné comme un champion.

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;
}

Comme mentionné, chrome ne le prend pas en charge. J'aime définir mes travailleurs dans le même fichier. Il s'agit d'une solution de contournement qui augmentera le nombre trouvé dans innerHTML de l'élément le id=numtoutes les 500 ms.

Une raison probable est que Chrome ne vous permet pas de charger les travailleurs Web lors de l'exécution de scripts à partir d'un fichier local. Et j'essaye d'exécuter le code sur mon firefox, je ne peux pas non plus.

Oui, cela ne fonctionnera pas dans chorome si vous chargez un fichier local. Mais cela fonctionnera bien dans le navigateur Firefox. Et vous devez ajouter le code ci-dessous dans le fichier HTML.

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