javascript - "Las solicitudes de origen cruzado solo son compatibles con HTTP".Error al cargar un archivo local




file 3d three.js (19)

En Chrome puedes usar esta bandera:

--allow-file-access-from-files

Leer más aquí.

Estoy tratando de cargar un modelo 3D en Three.js con JSONLoader , y ese modelo 3D está en el mismo directorio que todo el sitio web.

Recibo el mensaje "Cross origin requests are only supported for HTTP." error, pero no sé qué lo está causando ni cómo solucionarlo.


Simplemente dice que la aplicación debe ejecutarse en un servidor web. Tuve el mismo problema con Chrome, comencé Tomcat y moví mi aplicación allí, y funcionó.


También he podido recrear este mensaje de error cuando uso una etiqueta de ancla con el siguiente href:

<a href="javascript:">Example a tag</a>

En mi caso, se usaba una etiqueta para obtener el 'Cursor del puntero' y el evento fue controlado por un evento de jQuery on click. Quité el href y agregué una clase que aplica:

cursor:pointer;


La forma más rápida para mí fue: para los usuarios de Windows, ejecute su archivo en el problema de Firefox resuelto, o si desea usar Chrome, la forma más fácil para mí fue instalar Python 3 y luego desde el símbolo del sistema ejecutar el comando python -m http.server luego ir a http://localhost:8000/ luego navega a tus archivos

python -m http.server

Voy a enumerar 3 enfoques diferentes para resolver este problema:

  1. Usando un paquete npm muy liviano : instale live-server usando npm install -g live-server . Luego, vaya a ese directorio, abra el terminal y escriba live-server y presione enter, la página se servirá en localhost:8080 . BONIFICACIÓN: también admite la recarga en caliente de forma predeterminada.
  2. Usando una aplicación liviana de Google Chrome desarrollada por Google : instale la aplicación luego, vaya a la pestaña de aplicaciones en Chrome y abra la aplicación. En la aplicación apunta a la carpeta correcta. ¡Tu página será servida!
  3. Modificación del acceso directo de Chrome en Windows : cree el acceso directo de un navegador Chrome. Haga clic derecho en el icono y abra las propiedades. En las propiedades, edite el target en "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession" y guarde. Luego, usando Chrome, abre la página usando ctrl+o . NOTA: NO use este atajo para la navegación regular.

Para todos ustedes en MacOS ... configure un LaunchAgent simple para habilitar estas capacidades glamorosas en su propia copia de Chrome ...

Guarde una plist nombre que sea ( launch.chrome.dev.mode.plist , por ejemplo) en ~/Library/LaunchAgents con contenido similar a ...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>launch.chrome.dev.mode</string>
    <key>ProgramArguments</key>
    <array>
        <string>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</string>
        <string>-allow-file-access-from-files</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
</dict>
</plist>

Debería iniciarse en el inicio ... pero puede obligarlo a hacerlo en cualquier momento con el comando de terminal

launchctl load -w ~/Library/LaunchAgents/launch.chrome.dev.mode.plist

Tada! 💁🏻 🙊 🙏🏾


Le sugiero que use un mini servidor para ejecutar este tipo de aplicaciones en localhost (si no está usando algún servidor incorporado).

Aquí hay uno que es muy simple de configurar y ejecutar:

https://www.npmjs.com/package/tiny-server

Me encontré con esto hoy.

Escribí un código que se veía así:

app.controller('ctrlr', function($scope, $http){
    $http.get('localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

... pero debería haberse visto así:

app.controller('ctrlr', function($scope, $http){
    $http.get('http://localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

La única diferencia fue la falta de http:// en el segundo fragmento de código.

Solo quería poner eso por ahí en caso de que haya otros con un problema similar.


Recibía este error exacto al cargar un archivo HTML en el navegador que estaba usando un archivo json del directorio local. En mi caso, pude resolver esto creando un servidor de nodo simple que permitía el servidor de contenido estático. Dejé el código para esto en esta otra respuesta .


Mi bola de cristal dice que está cargando el modelo con cualquiera de los file:// o C:/ , que permanece fiel al mensaje de error ya que no son http://

Por lo tanto, puede instalar un servidor web en su PC local o cargar el modelo en otro lugar y usar jsonp y cambiar la URL a http://example.com/path/to/model


Para aquellos en Windows sin Python o Node.js, todavía hay una solución liviana: Mongoose .

Todo lo que debe hacer es arrastrar el ejecutable a donde sea que esté la raíz del servidor y ejecutarlo. Aparecerá un icono en la barra de tareas y navegará al servidor en el navegador predeterminado.

Además, Z-WAMP es un Z-WAMP 100% portátil que se ejecuta en una sola carpeta, es increíble. Esa es una opción si necesita un servidor PHP y MySQL rápido.


Una forma en que funcionó al cargar archivos locales es usarlos en la carpeta del proyecto en lugar de hacerlo fuera de la carpeta del proyecto. Cree una carpeta debajo de los archivos de ejemplo de su proyecto similar a la forma en que creamos para las imágenes y reemplace la sección donde se usa una ruta local completa distinta a la ruta del proyecto y use la URL relativa del archivo en la carpeta del proyecto. Funciono para mi


Solo para ser explícito: sí, el error file://some/path/some.html que no puede apuntar su navegador directamente al file://some/path/some.html

Aquí hay algunas opciones para activar rápidamente un servidor web local para permitir que su navegador genere archivos locales

Python 2

Si tienes instalado Python ...

  1. Cambie el directorio a la carpeta donde está su archivo some.html o archivo (s) usando el comando cd /path/to/your/folder

  2. Inicie un servidor web de Python con el comando python -m SimpleHTTPServer

Esto iniciará un servidor web para alojar su directorio completo en http://localhost:8000

  1. Puede usar un puerto personalizado python -m SimpleHTTPServer 9000 que le proporciona un enlace: http://localhost:9000

Este enfoque está integrado en cualquier instalación de Python.

Python 3

Realice los mismos pasos, pero use el siguiente comando en python3 -m http.server lugar python3 -m http.server

Node.js

Alternativamente, si exige una configuración más receptiva y ya usa nodejs ...

  1. Instale http-server escribiendo npm install -g http-server

  2. Cambie a su directorio de trabajo, donde vive su some.html

  3. Inicie su servidor http emitiendo http-server -c-1

Esto hace girar un httpd Node.js que sirve los archivos en su directorio como archivos estáticos accesibles desde http://localhost:8080

Rubí

Si tu idioma preferido es Ruby ... los Dioses Ruby dicen que esto también funciona:

ruby -run -e httpd . -p 8080

PHP

Por supuesto PHP también tiene su solución.

php -S localhost:8000

Simplemente cambie la URL a http://localhost lugar de localhost . Si abres el archivo html desde el local, deberías crear un servidor local para servir ese archivo html, la forma más sencilla es usar Web Server for Chrome . Eso solucionará el problema.


En una aplicación de Android, por ejemplo, para permitir que JavaScript tenga acceso a los activos a través del file:///android_asset/ - use setAllowFileAccessFromFileURLs(true) en el WebSettings que obtiene al llamar a getSettings() en WebView .


No es posible cargar archivos locales estáticos (por ejemplo: svg) sin servidor. Si tiene NPM / YARN instalado en su máquina, puede configurar un servidor http simple usando " http-server "

npm install http-server -g
http-server [path] [options]

O abra el terminal en esa carpeta de proyecto y escriba "hs". Automáticamente se iniciará el servidor HTTP en vivo.


Si usa Mozilla Firefox, funcionará como se espera sin ningún problema;

PS Incluso IE_Edge funciona bien, ¡sorprendentemente!


Sospecho que ya se ha mencionado en algunas de las respuestas, pero lo modificaré ligeramente para que tenga una respuesta de trabajo completa (más fácil de encontrar y usar).

  1. Vaya a: https://nodejs.org/en/download/ . Instalar nodejs.

  2. Instale http-server ejecutando el comando desde el símbolo del sistema npm install -g http-server .

  3. Cambie a su directorio de trabajo, donde reside index.html / yoursome.html .

  4. Inicie su servidor http ejecutando el comando http-server -c-1

Abra el navegador web en http://localhost:8080 o http://localhost:8080/yoursome.html , dependiendo de su nombre de archivo html.


Te encuentras con problemas de CORS.

Hay varias formas de solucionar esto.

  1. Desactive CORS. Por ejemplo: cómo desactivar cors en cromo
  2. Usa un plugin para tu navegador
  3. Utilice un proxy como nginx. ejemplo de cómo configurar

Más detalladamente, está intentando acceder a api.serverurl.com desde localhost. Esta es la definición exacta de solicitud de dominio cruzado.

Ya sea que lo apague solo para hacer su trabajo (OK, ponga poca seguridad para usted si visita otros sitios y simplemente deja la lata en el camino) puede usar un proxy que hace que su navegador piense que todas las solicitudes provienen del host local cuando Realmente tienes un servidor local que luego llama al servidor remoto.

por lo que api.serverurl.com puede convertirse en localhost: 8000 / api y su nginx local u otro proxy enviarán al destino correcto.

Ahora por demanda popular, 100% más información de CORS .... ¡el mismo gran sabor!

Y para los downvoters ... omitir CORS es exactamente lo que se muestra para aquellos que simplemente están aprendiendo el extremo delantero. https://codecraft.tv/courses/angular/http/http-with-promises/





javascript file http 3d three.js