Chrome no puede cargar el trabajador web


109

Estoy trabajando en un proyecto que utiliza un trabajador web.

En mi sección principal tengo este código:

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

Esto funciona bien en Safari, pero Chrome informa el siguiente error:

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

¿Por qué esto funciona perfectamente en Safari pero no en Chrome? ¿Cómo puedo solucionar esto?

Gracias.


1
¿Está trabajando con el protocolo de archivos? Si configura el indicador de acceso y comprueba si funciona: stackoverflow.com/questions/18586921/…
epascarello

1
Sí, el camino para el trabajador web es la siguiente: file:///E:/programming/web/project/worker.js. El camino para el proyecto principal es la siguiente: file:///E:/programming/web/project/index.html.
Progo

Respuestas:


84

Chrome no le permite cargar trabajadores web cuando ejecuta scripts desde un archivo local.


6
De esta respuesta , Loading a local file, even with a relative URL, is the same as loading a file with the file: protocol.y no es bueno que las páginas web puedan acceder a su sistema de archivos por capricho.
ChaseMoskal

41
-1 firsfox te permitirá hacer esto, por supuesto, siempre que también estés usando un archivo como origen (por ejemplo, estás viendo un archivo local en el navegador). Es solo el cromo que está roto.
Tomáš Zato - Reincorpora a Monica

3
Firefox todavía funciona (sí, del archivo: //), Chrome no en este caso.
Evil

55

Yo uso una solución. Bloques de cromo Workerpero no <script>. Por lo tanto, la mejor manera de hacer una solución universal es esta:

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

A continuación, lo vincula normalmente <script src="...". Y una vez que la función está definida, usas esta abominación de código:

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

Esta solución es buena. ¿Por qué en este mundo nada es perfecto? Cada software está agitando a los usuarios con errores, fallas, comportamientos infantiles, etc. Firefox también es arrogante ya que se niega a admitir la propiedad css "clip-path".
Ĭsααc t ի ε βöss

No soy un desarrollador de js y no entiendo el punto del uso de la etiqueta de script aquí. ¿Y qué es la ventana! = Autocomprobación? ¿Alguien puede explicar esta secuencia de carga? Gracias.
Sharun

Google chrome cargará las etiquetas de script si están en el mismo directorio que HTML. window!=seldcomprueba si el código se está ejecutando en el trabajador web. Esto hace que este código sea portátil en caso de que cargue el archivo javascript directamente en otros contextos.
Tomáš Zato - Reincorpora a Monica

1
@ treeseal7 El código que debe ejecutarse en el contexto del trabajador web.
Tomáš Zato - Reincorpora a Monica

2
Debo señalar que no puede usar importScript de un trabajador escrito así. Al menos, no sin una solución adicional. Por lo tanto, necesitará más manipulación para un trabajador de varios archivos.
SlugFiller

41

Noble Chicken ha explicado correctamente el problema, pero tengo una solución más general. En lugar de instalar wamp o xamp, con python puede navegar a la carpeta en la que está alojado su proyecto y escribir:python -m http.server

Solo eso y tendrá un servidor en ejecución en esa carpeta, accesible desde localhost.


13
Es probable que las Mac necesiten ir con python -m SimpleHTTPServer 8000ellas, ya que están cargadas con <Python 3 (solo para guardar otra búsqueda de Google: D)
siege_Perilous

3
también puede instalar el módulo de nodo del servidor http y luego navegar a la carpeta deseada desde el terminal y ejecutar 'http-server -p 3000'.
Huan Zhang

vale la pena mencionar este script "python -m http.server" necesita Python 3.
milesma

php -S localhost:8000
Prueba

29

También puede usar la marca --allow-file-access-from-files cuando inicia Chrome.

Ejemplo para MacOsX:

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

Más información: configuración del trabajador web para Chrome


En la ventana de comandos de Windows, navegue hasta: "C: \ Users \ NAME \ AppData \ Local \ Google \ Chrome SxS \ Application", luego ejecute chrome.exe --allow-file-access-from-files, luego copie la ruta del archivo local por ejemplo, c: \ temp \ myWeb \ index.html y péguelo en la URL del navegador abierto, listo.
milesma

4
También puede crear un atajo y pasar la bandera en la ruta de destino.
Stephan

1
Ah, y de la pregunta vinculada, recuerde cerrar todas las ventanas de Chrome antes de iniciar con la bandera.
Stephan

Sí, otra opción también puede ser codificar una extensión de Chrome con el permiso correcto en su manifiesto: "permisos": ["archivo: // * / *"], como en stackoverflow.com/questions/19493020/…
Mickaël

Nota: "Tienes que cerrar todas las ventanas de Chrome antes de abrirlo con la --allow-file-access-from-filesbandera activada". como se indica en stackoverflow.com/a/21771754/325418
polaridad

15

Es por las restricciones de seguridad. Necesita usar http://o el https://protocolo en lugar de file:///.

Si tiene NodeJS instalado, simplemente puede hacer lo siguiente. - Tenga en cuenta que esta es una de las muchas opciones disponibles.

Instalar servidor web local

$ npm install -g local-web-server

Ahora puede usarlo en cualquier carpeta a través de la que desee acceder a los contenidos http.

$ ws

Navegar a http://localhost:8000(puerto predeterminado: 8000)


6

También tuve el mismo problema que tu publicación. La solución es que debes ejecutarlo con localhost (wamp o xamp). Estará hecho.


Vaya, nunca hubiera encontrado esto, ¡gracias! (Espero que se permitan las gracias en los comentarios)
dcromley



3

Chromecargar el archivo pero no puede ejecutarlo. Utilice Firefox. Me está funcionando.


1
Para explicar mi voto negativo: esto podría ser mejor comenzar con un comentario, quizás preguntando más sobre los requisitos de soporte de su navegador, en lugar de enviarlo como respuesta. Es muy probable que no sea una respuesta, dado lo que el usuario ya ha dicho sobre la compatibilidad con varios navegadores.
Thomas Poole

Si ha leído la pregunta detenidamente, estoy seguro de que no votará negativamente la respuesta como tres antes de votarla a favor. El usuario dice que Chrome no puede cargar el trabajador. No, Chrome puede cargar el trabajador pero no puede ejecutarlo. Las razones por las que lo pongo como respuesta son, en primer lugar, la pregunta que se hizo hace un año y, en segundo lugar, muchas respuestas dicen que Firefox no está ejecutando el trabajador, por lo que no puedo comentarlas todas. Solo te lo estoy explicando, pero tienes derecho a votar en contra o en favor.
Hocine Ben

3

Una forma fácil de hacer un servidor http local en Chrome es esta aplicación:

Servidor web para Chrome

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

Descripción:

Un servidor web para Chrome, sirve páginas web desde una carpeta local a través de la red, utilizando HTTP. Funciona sin conexión. Web Server para Chrome es un servidor HTTP de código abierto (MIT) para Chrome.

Se ejecuta en cualquier lugar donde tenga instalado Chrome, por lo que puede llevarlo a cualquier lugar. Incluso funciona en Chromebooks ARM.

Ahora tiene la opción de escuchar en la red local, para que otras computadoras puedan acceder a sus archivos. Además, puede intentar obtener una dirección de Internet.

Mucha gente usa esto para hacer desarrollo web básico en un Chromebook. También es útil para compartir archivos a través de una red local entre computadoras o incluso en Internet.

Una vez que lo instale, vaya a http://127.0.0.1:8887

Y no es inseguro como flag --allow-file-access-from-files


¡Esto es increíble! Ahora puedo ejecutar mi aplicación reactJS con trabajadores web desde el sistema de archivos local. ¡No puede ser mucho más fácil!
Json

3

Esto está inspirado en la respuesta de Thomas anterior. Pero con una advertencia de que quería distribuir solo el HTML, así que convertí manualmente el js a dataURL . y habilitando la casilla de verificación URL de datos en él.

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


2

Con Python 2.x desplegado más ampliamente que Python 3.x, algo como python -m SimpleHTTPServer 8000 es aplicable de manera más general, y no solo para Mac OS X. Lo encontré necesario para su uso bajo Cygwin, por ejemplo.

Con eso en su lugar, este ejemplo funcionó como un campeón.


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

Como se mencionó, Chrome no lo admite. Me gusta definir a mis trabajadores en el mismo archivo. Esta es una solución de trabajo que aumentará un número encontrado en innerHTML del elemento con id=numcada 500ms.


1

Una razón probable es que Chrome no le permite cargar trabajadores web cuando ejecuta scripts desde un archivo local. Y trato de ejecutar el código en mi firefox, tampoco puedo.


Los trabajadores web funcionan bien file://en Firefox 51.0.1
bryc

-6

Sí, no funcionará en chorome si está cargando un archivo local. Pero funcionará bien en el navegador Firefox. Y debe agregar el siguiente código en el archivo HTML.

<head>
    <meta charset="UTF-8" />
</head>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.