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

796

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 "Cross origin requests are only supported for HTTP."error, pero no sé qué lo está causando ni cómo solucionarlo.

corazza
fuente
23
¿Estás tratando de hacer esto localmente?
WojtekT
11
Debe usar localhost, incluso si es un archivo local
Neil
22
¡Pero no cruza el dominio!
corazza
21
Si está usando Chrome, iniciarlo desde el terminal con la opción --allow-file-access-from-files podría ayudarlo.
nickiaconis
12
Sí, en realidad no es de dominio cruzado cuando el archivo está en la misma carpeta que la página web, ahora lo es ... Descubrí que si usa Firefox en lugar de Chrome, el problema desaparece.
Sphinxxx

Respuestas:

790

Mi bola de cristal dice que está cargando el modelo usando file://o C:/, lo que se mantiene fiel al mensaje de error ya que nohttp://

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

El origen se define en RFC-6454 como

   ...they have the same
   scheme, host, and port.  (See Section 4 for full details.)

Entonces, aunque su archivo se origine en el mismo host ( localhost), pero siempre que el esquema sea diferente ( http/ file), se tratarán como un origen diferente.

Andreas Wong
fuente
77
Sí, estoy tratando de hacer esto usando file://, pero no entiendo por qué está permitido. Bueno, estoy instalando Lampp, supongo ...
corazza
150
Imagínese si se permite que una aplicación web y que el autor de la página utiliza algo así load('file://C:/users/user/supersecret.doc')y luego subir el contenido a su servidor usando AJAX, etc
Andreas Wong
11
desafortunadamente, la política está hecha para todos los casos, no solo para el tuyo :(, así que debes soportarlo
Andreas Wong
28
Hay una página para este tema en el wiki de GitHub: github.com/mrdoob/three.js/wiki/How-to-run-things-locally
Felipe Lima
29
También puede usar el modificador --allow-file-access-from-files en Chrome. Según mi respuesta aquí: stackoverflow.com/questions/8449716/…
prauchfuss
609

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

Estas son algunas opciones para activar rápidamente un servidor web local para permitir que su navegador procese archivos locales

Python 2

Si tienes instalado Python ...

  1. Cambie el directorio a la carpeta donde some.htmlexisten sus archivos utilizando el comandocd /path/to/your/folder

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

Esto iniciará un servidor web para alojar toda su lista de directorios en http://localhost:8000

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

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

Python 3

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

Node.js

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

  1. Instalar http-serverescribiendonpm install -g http-server

  2. Cambie a su directorio de trabajo, donde some.htmlvive

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

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

Rubí

Si su 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
Scott Stensland
fuente
3
Esto me ahorró un montón de tiempo, gracias. Mi instalación de Python no tenía el módulo SimpleHTTPServer, pero las instrucciones del nodo funcionaron de maravilla.
LukeP
3
En respuesta al comentario de LukeP, en Python 2.7 el comando funciona según las instrucciones $ python -m SimpleHTTPServer, lo que produce el mensaje: Serving HTTP on 0.0.0.0 port 8000 ...Si escribe mal el nombre del módulo, por ejemplo $ python -m SimpleHttpServer, recibirá el mensaje de error No module named SimpleHttpServer. Recibirá un mensaje de error similar si tiene python3 instalado (v. python 2.7). Puede comprobar la versión de Python usando el comando: $ python --version. También puede especificar el puerto para escuchar de esta manera:$ python -m SimpleHTTPServer 3333
7stud
1
El servidor Python sirve archivos del directorio donde inicia el servidor. Entonces, si los archivos que desea publicar se encuentran en / Users / 7stud / angular_projects / 1app, inicie el servidor en ese directorio, por ejemplo $ cd ~/angular_projects/1app, entonces $ python -m SimpleHTTPServer. En su navegador ingrese la url http://localhost:8000/index.html. También puede solicitar archivos en subdirectorios del directorio donde inició el servidor, por ejemplohttp://localhost:8000/subdir/hello.html
7stud
2
He oído que Python es simple y poderoso, al igual que el lenguaje "X", ¡pero esto es ridículo! No es necesario instalar XAMPP o configurar un servidor http simple js con nodo para servir archivos estáticos: ¡un comando y boom! Muchas gracias, ahorra MUCHO tiempo y molestias.
RD
2
¡INCREÍBLE! - para Python en el uso de Windows: python -m http.server 8080 ... o cualquier puerto que desee y cuando quiera salir simplemente ctrl-c.
Kristopher
162

En Chrome puedes usar esta bandera:

--allow-file-access-from-files

Leer más aquí.

Comunidad
fuente
11
@ Blairg23, tenga en cuenta que esta solución requiere reiniciar todas las instancias de Chrome.exe para que funcione
Alex Klaus
44
Por favor, explique cómo usarlo en Chrome.
Rishabh Agrahari
@Priya no debería hacer esto sin embargo
Suraj Jain
Sugeriría usar Chromium solo para la depuración local (comenzando con la marca --allow-file-access-from-files). Significa usar Chrome para la navegación web común y usar Chromium como la aplicación predeterminada para el archivo HTML.
Alan Zhiliang Feng
Tenga en cuenta que fetch()todavía lo niega de todos modos. Debe usar XMLHttpRequestde alguna manera
Hashbrown
63

Me encontré con esto hoy.

Escribí un código que se parecía a esto:

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 publicar eso en caso de que haya otros con un problema similar.

James Harrington
fuente
41

Simplemente cambie la url a en http://localhostlugar de localhost. Si abre el archivo html desde local, debe crear un servidor local para servir ese archivo html, la forma más sencilla es usarlo Web Server for Chrome. Eso solucionará el problema.

finlandés
fuente
55
+1 para el Web Server for Chromeenlace de la aplicación: es, con mucho, la solución más simple y limpia para la configuración temporal de httpd para Chrome IMO
Me salvó La solución exacta
Surya
18

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

CommonsWare
fuente
¡Brillante! Estábamos a punto de reescribir métodos para inyectar JSON en variables ... ¡pero esto funciona! webView.getSettings (). setAllowFileAccessFromFileURLs (verdadero);
WallyHale
15

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

error :localhost:8080

solución :http://localhost:8080

KARTHIKEYAN.A
fuente
14

La forma más rápida para mí fue: para los usuarios de Windows, ejecute su archivo en Firefox. El problema 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 y python -m http.server luego ir a http: // localhost: 8000 / luego navega a tus archivos

python -m http.server
Ridha Rezzag
fuente
13

Voy a enumerar 3 enfoques diferentes para resolver este problema:

  1. Usando un npmpaquete muy liviano : instale live-server usando npm install -g live-server. Luego, vaya a ese directorio, abra la terminal y escriba live-servery 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 ligera de Google Chrome desarrollada por Google : instale la aplicación, vaya a la pestaña de aplicaciones en Chrome y abra la aplicación. En la aplicación apúntelo a la carpeta correcta. Su página será servida!
  3. Modificación del acceso directo de Chrome en Windows : cree un acceso directo del navegador Chrome. Haga clic derecho en el icono y abra las propiedades. En las propiedades de edición, targeta "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"y guardar. Luego, usando Chrome, abra la página usando ctrl+o. NOTA: NO use este acceso directo para la navegación regular.
Barba Negra
fuente
12

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

bryc
fuente
Si instala php o lo ha instalado, puede iniciar un servidor en su carpeta: php.net/manual/es/features.commandline.webserver.php
jechaviz
12

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

PD Sorprendentemente, IntenetExplorer_Edge funciona absolutamente bien !!!

Yash P Shah
fuente
1
ya no. Firefox y, por ejemplo, están bloqueando la solicitud de cors para mí
Baahubali
tampoco es bueno acceder a páginas no
seguras
6

Solución fácil para quienes usan VS Code

He estado recibiendo este error por un tiempo. La mayoría de las respuestas funciona. Pero encontré una solución diferente. Si no desea tratar con node.jsninguna otra solución aquí y está trabajando con un archivo HTML (llamando a funciones desde otro archivo js o buscando json api's) intente usar la extensión Live Server .

Le permite abrir un servidor en vivo fácilmente. Y debido a que crea un localhostservidor, el problema se está resolviendo. Simplemente puede comenzar localhostabriendo un archivo HTML y hacer clic derecho en el editor y hacer clic enOpen with Live Server .

Básicamente carga los archivos usando en http://localhost/index.htmllugar de usar file://....

EDITAR

No es necesario tener un .htmlarchivo. Puede iniciar el servidor en vivo con accesos directos.

Presione (alt+L, alt+O)para abrir el servidor y (alt+L, alt+C)detener el servidor. [En MAC,cmd+L, cmd+O y cmd+L, cmd+C]

Espero que ayude a alguien :)

Ömürcan Cengiz
fuente
4

Recibí 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 almacenar contenido estático. Dejé el código para esto en esta otra respuesta .

thehme
fuente
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
Deniss M.
fuente
4

Sospecho que ya se menciona en algunas de las respuestas, pero lo modificaré ligeramente para tener 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 el servidor http ejecutando el comando desde el símbolo del sistema npm install -g http-server.

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

  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 , según su nombre de archivo html.

TarmoPikaro
fuente
3

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

Enayat
fuente
1

er. Acabo de encontrar algunas palabras oficiales "Intentando cargar módulos AMD remotos no construidos que usan el complemento dojo / texto fallarán debido a restricciones de seguridad de origen cruzado. (Las versiones integradas de 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/

YUIOP QWERT
fuente
1

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

Naga Sai A
fuente
1

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

Guarde un plist, nombrado lo que sea ( launch.chrome.dev.mode.plistpor ejemplo) ~/Library/LaunchAgentscon 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>

Se debe lanzar en el arranque .. pero puede forzar a hacerlo en cualquier momento con el comando de terminal

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

TADA! 😎 💁🏻 🙊 🙏🏾

Alex Gray
fuente
1
  • Instale el servidor web local para Java, por ejemplo, Tomcat, para php puede usar la lámpara, etc.
  • Suelte el archivo json en el directorio del servidor de aplicaciones público accesible
  • Elemento de la lista

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

Fred Ondieki
fuente
1

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 la terminal en esa carpeta de proyecto y escriba "hs". Se iniciará automáticamente el servidor HTTP en vivo.

Sujith S
fuente
respuesta duplicada
Scott Stensland
0

También he podido recrear este mensaje de error al usar una etiqueta de anclaje con la siguiente href:

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

En mi caso, se estaba usando una etiqueta para obtener el 'Cursor de puntero' y el evento en realidad estaba controlado por algún evento jQuery on click. Eliminé el href y agregué una clase que se aplica:

cursor:pointer;

mgilberties
fuente
0

Para usuarios de Linux Python:

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)
Daniel Braun
fuente
¿No hay razón por la google-chrome --allow-file-access-from-files <url>cual no funcionaría y sería más conciso?
agupta231
@ agupta231 El módulo de navegador web tiene argumentos que le permiten diferentes tipos de "apertura", por ejemplo. abrir en la pestaña actual, nueva pestaña, nueva ventana, etc.
Daniel Braun
0

Si insiste en ejecutar el .htmlarchivo localmente y no servirlo con un servidor web, puede evitar que esas solicitudes de origen cruzado sucedan en primer lugar haciendo que los recursos problemáticos estén disponibles en línea.

Tuve este problema al intentar servir .jsarchivos file://. Mi solución fue actualizar mi script de compilación para reemplazar las <script src="...">etiquetas <script>...</script>. Aquí hay un gulpenfoque para hacerlo:

1. ejecutar npm install --save-deva paquetes gulp, gulp-inliney del.

2. Después de crear gulpfile.jsa en el directorio raíz, agregue el siguiente código (simplemente cambie las rutas de archivo para lo que le convenga):

let gulp = require('gulp');
let inline = require('gulp-inline');
let del = require('del');

gulp.task('inline', function (done) {
    gulp.src('dist/index.html')
    .pipe(inline({
        base: 'dist/',
        disabledTypes: 'css, svg, img'
    }))
    .pipe(gulp.dest('dist/').on('finish', function(){
        done()
    }));
});

gulp.task('clean', function (done) {
    del(['dist/*.js'])
    done()
});

gulp.task('bundle-for-local', gulp.series('inline', 'clean'))
  1. Ejecute gulp bundle-for-localo actualice su script de compilación para ejecutarlo automáticamente.

Puede ver el problema detallado y la solución para mi caso aquí .

noamyg
fuente
-1

Córdoba logra esto. Todavía no puedo entender cómo le fue a Córdoba. Ni siquiera pasa por shouldInterceptRequest.

Más tarde descubrí que la clave para cargar cualquier archivo desde local es: myWebView.getSettings (). SetAllowUniversalAccessFromFileURLs (true);

Y cuando desee acceder a cualquier recurso http, la vista web realizará una comprobación con el método OPTIONS, al que puede otorgar el acceso a través de WebViewClient.shouldInterceptRequest devolviendo una respuesta, y para el siguiente método GET / POST, puede devolver nulo.

usuario1462586
fuente
-1

Experimenté esto cuando descargué una página para verla sin conexión.

Sólo tenía que quitar el integrity="*****"y crossorigin="anonymous"atributos de todo <link>y <script>etiquetas

aphoe
fuente