Chrome kann Web Worker nicht laden

109

Ich arbeite an einem Projekt, das einen Web-Worker verwendet.

In meinem Kopfbereich habe ich diesen Code:

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

Dies funktioniert in Safari einwandfrei, Chrome meldet jedoch den folgenden Fehler:

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

Warum funktioniert das in Safari perfekt, aber nicht in Chrome? Wie behebe ich das?

Danke dir.

Progo
quelle
1
Arbeiten Sie am Dateiprotokoll? Wenn Sie das Zugriffsflag gesetzt haben und prüfen,
epascarello
1
Ja, der Pfad für den Web Worker lautet : file:///E:/programming/web/project/worker.js. Der Pfad für das Hauptprojekt lautet : file:///E:/programming/web/project/index.html.
Progo
1
Versuchen Sie dies: stackoverflow.com/questions/18586921/…
epascarello

Antworten:

84

In Chrome können Sie keine Web-Worker laden, wenn Sie Skripts aus einer lokalen Datei ausführen.

Nobel Huhn
quelle
6
Aus dieser Antwort geht hervor , Loading a local file, even with a relative URL, is the same as loading a file with the file: protocol.dass Webseiten nicht einfach aus einer Laune heraus auf Ihr Dateisystem zugreifen können.
ChaseMoskal
41
Mit -1 firsfox können Sie dies natürlich tun, vorausgesetzt, Sie verwenden auch eine Datei als Ursprung (z. B. wenn Sie eine lokale Datei im Browser anzeigen ). Es ist nur Chrom, das kaputt ist.
Tomáš Zato - Wiedereinsetzung Monica
3
Firefox funktioniert immer noch (ja aus Datei: //), Chrome in diesem Fall nicht.
Evil
55

Ich verwende eine Problemumgehung. Chrome blockiert Workeraber nicht <script>. Daher ist der beste Weg, eine universelle Lösung zu finden, folgender:

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

Sie verknüpfen es dann wie gewohnt <script src="...". Und sobald die Funktion definiert ist, verwenden Sie diesen Gräuel eines Codes:

new Worker(URL.createObjectURL(new Blob(["("+worker_function.toString()+")()"], {type: 'text/javascript'})));
Tomáš Zato - Monica wieder einsetzen
quelle
Diese Lösung ist gut. Warum in dieser Welt ist nichts perfekt? Jede Software erregt die Benutzer mit Fehlern, Fehlern, kindlichem Verhalten usw. Firefox ist auch arrogant, da es sich weigert, die CSS-Eigenschaft "Clip-Pfad" zu unterstützen.
αsααc t ի ε βöss
Ich bin kein js-Entwickler und verstehe den Sinn des hier verwendeten Skript-Tags nicht. Und wofür ist das Fenster! = Selbsttest? Kann jemand bitte diese Ladesequenz erklären? Vielen Dank.
Sharun
Skript-Tags werden von Google Chrome geladen, wenn sie sich im selben Verzeichnis wie HTML befinden. window!=seldprüft, ob der Code im Web Worker ausgeführt wird. Dies macht diesen Code portabel, falls Sie die Javascript-Datei direkt in anderen Kontexten laden.
Tomáš Zato - Wiedereinsetzung Monica
1
@ treeeal7 Der Code, der im Web Worker-Kontext ausgeführt werden soll.
Tomáš Zato - Wiedereinsetzung Monica
2
Ich sollte beachten, dass Sie kein ImportScript von einem so geschriebenen Worker verwenden können. Zumindest nicht ohne zusätzliche Problemumgehung. Sie müssen also mehr Manipulationen für einen Multi-File-Worker vornehmen.
SlugFiller
41

Das Problem wurde von Noble Chicken richtig erklärt, aber ich habe eine allgemeinere Lösung dafür. Anstatt wamp oder xamp zu installieren, können Sie mit Python zu dem Ordner navigieren, in dem Ihr Projekt gehostet wird, und Folgendes eingeben:python -m http.server

Genau das und Sie haben einen laufenden Server in diesem Ordner, der von localhost aus erreichbar ist.

Robert Parcus
quelle
13
Macs müssen wahrscheinlich mitgehen, python -m SimpleHTTPServer 8000da sie mit <Python 3 geladen sind (nur um eine weitere Google-Suche zu speichern: D)
siege_Perilous
3
Sie können auch das http-Server-Knotenmodul installieren und dann vom Terminal zum gewünschten Ordner navigieren und 'http-server -p 3000' ausführen.
Huan Zhang
Erwähnenswert ist, dass dieses Skript "python -m http.server" Python 3 benötigt.
Milesma
Versuchen Sie auchphp -S localhost:8000
William Entriken
29

Sie können beim Starten von Chrome auch das Flag --allow-file-access-from-files verwenden.

Beispiel für MacOsX:

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

Weitere Informationen: Web Worker-Einstellungen für Chrome

Mickaël
quelle
Navigieren Sie im Windows-Befehlsfenster zu: "C: \ Benutzer \ NAME \ AppData \ Local \ Google \ Chrome SxS \ Application", führen Sie chrome.exe --allow-file-access-from-files aus und kopieren Sie dann Ihren lokalen Dateipfad zB c: \ temp \ myWeb \ index.html und in die URL des geöffneten Browsers einfügen, fertig.
Meilenma
4
Sie können auch eine Verknüpfung erstellen und das Flag im Zielpfad übergeben.
Stephan
1
Denken Sie bei der verknüpften Frage daran, alle Chrome-Fenster zu schließen, bevor Sie mit der Flagge starten.
Stephan
Ja, eine andere Option kann auch darin bestehen, eine Chrome-Erweiterung mit der richtigen Berechtigung in ihrem Manifest zu codieren: "Berechtigungen": ["Datei: // * / *"], wie in stackoverflow.com/questions/19493020/…
Mickaël
Hinweis: "Sie müssen alle Fenster von Chrome schließen, bevor Sie es mit --allow-file-access-from-filesaktiviertem Flag öffnen können ." wie auf stackoverflow.com/a/21771754/325418 angegeben
Unpolarität
15

Dies liegt an den Sicherheitsbeschränkungen. Sie müssen stattdessen http://oder https://protokollieren file:///.

Wenn Sie NodeJS installiert haben, können Sie einfach Folgendes tun. - Beachten Sie, dass dies eine von vielen verfügbaren Optionen ist

Installieren Sie den lokalen Webserver

$ npm install -g local-web-server

Jetzt können Sie es in jedem Ordner verwenden, über den Sie auf den Inhalt zugreifen möchten http.

$ ws

Navigieren Sie zu http://localhost:8000(Standardport: 8000)

Sicherer Hussain
quelle
6

Ich hatte das gleiche Problem wie Ihr Beitrag. Die Lösung ist, dass Sie es mit localhost (wamp oder xamp) ausführen müssen. Es wird getan.

Thara
quelle
Wow, das hätte ich nie gefunden - danke! (Ich hoffe, danke sind in Kommentaren erlaubt)
Dcromley
4

Eine weitere Problemumgehung ist die Verwendung des Google- Webservers für die Chrome- Erweiterung. Wählen Sie Ihr Arbeitsverzeichnis und starten Sie den Server. Fertig!

Yubo
quelle
3

Sie benötigen einen Webserver für die Anforderung vom HTTP-Protokoll anstelle der lokalen Datei und arbeiten ordnungsgemäß :)

Alireza Alallah
quelle
1
Nein, tust du nicht. Sie müssen Browser ignorieren, die nicht den Webstandards entsprechen, nur weil sie Mainstream sind.
Tomáš Zato - Wiedereinsetzung Monica
3

ChromeLaden Sie die Datei, können Sie sie jedoch nicht ausführen. Verwenden Sie Firefox. Es funktioniert für mich.

Hocine Ben
quelle
1
Um meine Ablehnung zu erklären: Dies ist möglicherweise besser, wenn Sie mit einem Kommentar beginnen und sich möglicherweise mehr über die Anforderungen an die Browserunterstützung erkundigen, als als Antwort eingereicht zu werden. Angesichts der Aussagen des Benutzers zur browserübergreifenden Unterstützung scheint dies höchstwahrscheinlich keine Antwort zu sein.
Thomas Poole
Wenn Sie die Frage sorgfältig gelesen haben, bin ich sicher, dass Sie die Antwort nicht als drei abstimmen, bevor Sie sie abstimmen! Der Benutzer sagt, dass Chrome den Worker nicht laden kann. Nein, Chrome kann den Worker laden, aber nicht ausführen. Der Grund, warum ich es als Antwort formuliere, ist, dass erstens die Frage vor einem Jahr gestellt wurde und zweitens viele Antworten besagen, dass Firefox den Worker nicht ausführt, was ich nicht alle kommentieren kann. Ich erkläre nur, aber Sie haben das Recht, abzustimmen oder abzustimmen.
Hocine Ben
3

Diese App bietet eine einfache Möglichkeit, einen lokalen http-Server in Chrome zu erstellen:

Webserver für Chrome

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

Beschreibung:

Ein Webserver für Chrome stellt Webseiten aus einem lokalen Ordner über das Netzwerk mithilfe von HTTP bereit. Läuft offline. Web Server für Chrome ist ein Open Source (MIT) HTTP-Server für Chrome.

Es läuft überall dort, wo Sie Chrome installiert haben, sodass Sie es überall hin mitnehmen können. Es funktioniert sogar auf ARM-Chromebooks.

Es hat jetzt die Möglichkeit, das lokale Netzwerk abzuhören, damit andere Computer auf Ihre Dateien zugreifen können. Außerdem kann versucht werden, eine Internetadresse zu erhalten.

Viele Leute verwenden dies, um grundlegende Webentwicklungen auf einem Chromebook durchzuführen. Es ist auch praktisch, um Dateien über ein lokales Netzwerk zwischen Computern oder sogar im Internet auszutauschen.

Navigieren Sie nach der Installation zu http://127.0.0.1:8887

Und es ist nicht unsicher als Flag --allow-file-access-from-files

A. Denis
quelle
Das ist großartig! Ich kann jetzt meine reactJS-App mit Web-Workern aus dem lokalen Dateisystem ausführen. Einfacher geht es nicht!
Json
3

Dies ist inspiriert von Thomas Antwort oben. Aber mit einer Einschränkung, dass ich nur den HTML- Code verteilen wollte, habe ich die js manuell in dataURL konvertiert . und Aktivieren des Kontrollkästchens Daten-URL.

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

Goutham
quelle
2

Da Python 2.x weiter verbreitet ist als Python 3.x, python -m SimpleHTTPServer 8000ist so etwas allgemeiner anwendbar, und zwar nicht nur für Mac OS X. Ich fand es beispielsweise für die Verwendung unter Cygwin erforderlich.

Damit funktionierte dieses Beispiel wie ein Champion.

Salfter
quelle
2
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;
}

Wie bereits erwähnt, unterstützt Chrom dies nicht. Ich definiere meine Mitarbeiter gerne in derselben Datei. Dies ist eine funktionierende Problemumgehung, bei der die Anzahl der in innerHTML des Elements gefundenen Elemente id=numalle 500 ms erhöht wird.

Dominik Kolesar
quelle
1

Ein wahrscheinlicher Grund ist, dass Sie mit Chrome keine Web-Worker laden können, wenn Sie Skripte aus einer lokalen Datei ausführen. Und ich versuche den Code auf meinem Firefox auszuführen, kann auch nicht.

Eric Chang
quelle
Web Worker laufen gut file://in Firefox 51.0.1
Bryc
-6

Ja, es funktioniert nicht im Chorom, wenn Sie eine lokale Datei laden. Aber es wird gut in Firefox-Browser funktionieren. Und Sie müssen den folgenden Code in die HTML-Datei einfügen.

<head>
    <meta charset="UTF-8" />
</head>
anand vishwakarma
quelle