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

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.

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.

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

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

En Chrome puedes usar esta bandera:

--allow-file-access-from-files

Leer más aquí.

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.

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.

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.

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

error :localhost:8080

solución :http://localhost:8080

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

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.

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.

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

PD Sorprendentemente, IntenetExplorer_Edge funciona absolutamente bien !!!

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 :)

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 .

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

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.

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

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/

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

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

• 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

• 

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

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.

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 esta ayuda para quienes se encuentran con este problema.

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;

Para usuarios de Linux Python:

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)

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'))

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

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.

Primero cierre todas las instancias de Chrome.

después de eso sigue esto.

Usé este comando en mac.

"/ Aplicaciones / Google Chrome.app/Contents/MacOS/Google Chrome" --allow-file-access-from-files

Para ventanas:

¿Cómo iniciar html usando Chrome en modo "--allow-file-access-from-files"?

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