Chrome, Three.js: carga de la imagen de origen cruzado negó

estoy usando THREE.js y van a añadir un material como el siguienteChrome, Three.js: carga de la imagen de origen cruzado negó

var materialWall = new materialClass({ color: 0xffffff, map: THREE.ImageUtils.loadTexture('images/a.png') });

Funciona correctamente en Chrome, IE, FF, hasta hace 3 días , después de actualizar Chrome a la última versión de desarrollo (17).

Chrome 17 simplemente no se carga correctamente la imagen y se queja

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Eso es un poco extraño ya que la imagen es claramente en el mismo dominio, ¿cómo es que el material de origen cruzado entonces?

¿este es un error de Chrome o THREE.js o mi código?

Fuente

2011-11-05 Nami WANG

https://github.com/mrdoob/three.js/issues/687 se refiere a un problema en three.js 'GitHub, que tiene una buena lista de soluciones, incluyendo a link to a wiki page describing how to run locally. Hay también algunas otras soluciones en el hilo, incluyendo añadiendo lo siguiente a las secuencias de comandos:

THREE.ImageUtils.crossOrigin = "";

O, añadiendo encabezados CORS por lo que se les permite específicamente.

^{Tenga en cuenta que la mayor parte de esta información se ha añadido desde el enlace ya existente al problema, que el autor original de esta respuesta no incluyó.}

Fuente

2011-11-05 09:54:27

Todavía estoy teniendo ese problema hoy - ¿sabes si esto se ha solucionado o ...? Estoy actualizado ... ¿Hay trabajo alrededor? – keyle

¿La mejor manera de solucionarlo hoy, más de un año después? –

No dejes que tu respuesta sea más que un enlace. Incluya los detalles relevantes en su respuesta para que si el enlace muere (por ejemplo, si el proyecto se mueve a otra cuenta [y olvida cambiar este enlace], o se renombra, o si se elimina ese problema en particular, o GitHub cambia su convención de nomenclatura) , o ...) tu respuesta todavía tiene algún valor. –

Si está ejecutando Chrome Three.js localhost y utilizando, es probable que tenga que ejecutar Chrome con esta bandera de línea de comandos:

c:// ... /chrome.exe --allow-file-access-from-files

Fuente

2012-04-11 02:58:40

bien, pero los usuarios no ejecutarán ese comando ... esto no parece una solución viable para mí – Julius

cómo postular esto en ubuntu? – ajahongir

para Mac:/Aplicaciones/Google \ Chrome.app/Contents/MacOS/Google \ Chrome --allow-file-access-from-files – ken

Si:

no quiere para configurar su propio servidor, y
no quieren degradar la seguridad de su navegador

entonces me funcionó una forma de evitar esto lo que implica sólo un poco de esfuerzo:

convertir la imagen en texto base 64
almacenarlo en un Javascript externa presentar
Enlace a su página del proyecto
cargarlo en la textura de su

detalles completos se pueden encontrar en http://tp69.wordpress.com/2013/06/17/cors-bypass/ para aquellos que estén interesados.

Fuente

2013-06-17 10:08:03 Tim

Esto funcionó para mí en la línea de comandos \ Terminal:

./chrome.exe --disable-web-security

* en cuenta que debe cerrar todas las instancias de cromo antes de ejecutar el comando para que funcione.

Fuente

2014-12-29 04:49:08 Ice101781

La solución perfecta para:

tres.JS: carga de la imagen de origen cruzado negó

Sólo tiene que añadir marca de tiempo a la URL de la imagen. No sé la lógica detrás de esto, pero funciona.

Ejemplo:

var material = new THREE.MeshBasicMaterial({ 
    map: loader.load(url + "?v=" + (new Date()).toString(), function() { 
    animate(); 
    }) 
});

Fuente

2016-09-20 09:30:58

esto no funciona y no estoy seguro de cómo eso evitaría el error CORS . Lo único que evita es el almacenamiento en caché. También sería mejor con (nueva Fecha()). GetTime() en lugar de "toString()" – belzebu

También puede ejecutar un servidor HTTP simple usando Python ejecutando el siguiente comando desde el directorio raíz.

python -m SimpleHTTPServer 8000

Fuente

2016-12-09 09:28:18 Santosh

Chrome, Three.js: carga de la imagen de origen cruzado negó

Respuesta

Cuestiones relacionadas