Chrome non può caricare il web worker

Sto lavorando a un progetto che utilizza un web worker.

Nella mia sezione di testa ho questo codice:

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

Funziona bene in Safari, ma Chrome segnala il seguente errore:

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

Perché funziona perfettamente in Safari ma non in Chrome? Come lo risolvo?

Grazie.

Chrome non ti consente di caricare i web worker durante l'esecuzione di script da un file locale.

Uso una soluzione alternativa. Chrome si blocca Workerma non <script>. Quindi il modo migliore per realizzare una soluzione universale è questo:

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

Quindi lo colleghi normalmente <script src="...". E una volta definita la funzione, usi questo abominio di codice:

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

Il problema è stato adeguatamente spiegato da Noble Chicken, ma ho una soluzione più generale. Invece di installare wamp o xamp, con python puoi navigare nella cartella in cui è ospitato il tuo progetto e digitare:python -m http.server

Solo questo e avrai un server in esecuzione su quella cartella, raggiungibile da localhost.

Puoi anche utilizzare il flag --allow-file-access-from-files quando avvii Chrome.

Esempio per MacOsX:

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

Altre informazioni: impostazioni del Web worker per Chrome

È a causa delle restrizioni di sicurezza. Devi usare http://o https://protocollo invece di file:///.

Se hai installato NodeJS, puoi semplicemente fare quanto segue. - Nota che questa è una delle tante opzioni disponibili

Installa il server web locale

$ npm install -g local-web-server

Ora puoi usarlo in qualsiasi cartella attraverso la quale desideri accedere ai contenuti http.

$ ws

Vai a http://localhost:8000(porta predefinita: 8000)

Ho avuto anche lo stesso problema del tuo post. La soluzione è che devi eseguirlo con localhost (wamp o xamp). Sarà fatto.

Un'altra soluzione alternativa è utilizzare il server web di Google per l' estensione Chrome . Scegli la tua directory di lavoro e avvia il server, Fatto!

hai bisogno di un server web per la richiesta dal protocollo HTTP invece del file locale e funzioni correttamente :)

Chromecaricare il file ma non è possibile eseguirlo. Usa Firefox. Per me sta funzionando.

Un modo semplice per creare un server http locale in Chrome è questa app:

Server Web per Chrome

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

Descrizione:

Un server web per Chrome, serve pagine web da una cartella locale sulla rete, utilizzando HTTP. Funziona offline. Il server Web per Chrome è un server HTTP open source (MIT) per Chrome.

Funziona ovunque tu abbia installato Chrome, quindi puoi portarlo ovunque. Funziona anche su Chromebook ARM.

Ora ha la possibilità di ascoltare sulla rete locale, in modo che altri computer possano accedere ai tuoi file. Inoltre, può provare a ottenere un indirizzo Internet.

Molte persone lo usano per eseguire lo sviluppo web di base su un Chromebook. È anche utile per condividere file su una rete locale tra computer o anche su Internet.

Una volta installato, vai a http://127.0.0.1:8887

E non è sicuro come flag --allow-file-access-from-files

Questo è ispirato dalla risposta di Thomas sopra. Ma con un avvertimento che volevo distribuire solo l'HTML, quindi ho convertito manualmente js in dataURL . e abilitando la casella di controllo URL dati in essa.

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

Con Python 2.x più ampiamente distribuito rispetto a Python 3.x, qualcosa di simile python -m SimpleHTTPServer 8000è più generalmente applicabile, e non solo per Mac OS X. L'ho trovato necessario per l'uso sotto Cygwin, per esempio.

Con quello a posto, questo esempio ha funzionato come un campione.

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

Come accennato chrome non lo supporta. Mi piace definire i miei lavoratori nello stesso file. Questa è una soluzione alternativa che aumenterà il numero trovato in innerHTML dell'elemento the id=numogni 500 ms.

Probabilmente una ragione è che chrome non ti consente di caricare i web worker durante l'esecuzione di script da un file locale. E provo a eseguire il codice sul mio Firefox, non posso neanche.

Sì, non funzionerà in chorome se stai caricando un file locale. Ma funzionerà bene nel browser Firefox. E devi aggiungere sotto il codice nel file HTML.

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