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

file 3d

Question

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.

Answer 1

En Chrome puedes usar esta bandera:

--allow-file-access-from-files

Leer más aquí.

Answer 2

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 .

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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

Answer 7

Muchos problemas para esto, con mi problema falta ''/'' ejemplo: jquery-1.10.2.js: 8720 XMLHttpRequest no puede cargar http://localhost:xxxProduct/getList_tagLabels/ Debe ser: http://localhost:xxx/Product/getList_tagLabels/

Espero que esta ayuda para quienes se encuentran con este problema

Answer 8

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.

Answer 9

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.

Answer 10

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! 💁🏻 🙊 🙏🏾

Answer 11

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 .

Answer 12

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

PS Incluso IE_Edge funciona bien, ¡sorprendentemente!

Answer 13

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.

Answer 14

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ó.

Answer 15

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

3. 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

Answer 16

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.

Answer 17

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;

Answer 18

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

Answer 19

Utilice http:// o https:// para crear url

error : localhost:8080

solución : http://localhost:8080

Answer 20

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.

Answer 21

er. Acabo de encontrar algunas palabras oficiales "El intento de cargar módulos AMD remotos y no construidos que usan el complemento dojo / texto fallará debido a restricciones de seguridad de origen cruzado. (Las versiones construidas de los módulos AMD no se ven afectadas porque las llamadas a dojo / texto son eliminadas por el sistema de compilación) " https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

Answer 22

• Instale el servidor web local para Java, por ejemplo, Tomcat, para PHP puede usar la lámpara, etc.
• Coloque el archivo json en el directorio del servidor de aplicaciones accesible al público

• Inicie el servidor de aplicaciones, y debería poder acceder al archivo desde localhost