Pregunta "Error de solicitudes de origen cruzadas solo para HTTP." Al cargar un archivo local


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

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


614
2018-05-25 09:41


origen


Respuestas:


Mi bola de cristal dice que estás cargando el modelo usando cualquiera file:// o C:/, que se mantiene fiel al mensaje de error ya que no son http://

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


648
2018-05-25 09:42



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

Aquí hay algunas opciones para hacer girar rápidamente un servidor web local para permitir que su navegador muestre archivos locales

Python 2

Si tiene Python instalado ...

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

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

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

  1. Puedes usar un puerto personalizado python -m SimpleHTTPServer 9000 dándole un enlace: http://localhost:9000

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

Python 3

Haz los mismos pasos, pero usa el siguiente comando python3 -m http.server

Node.js

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

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

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

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

Esto hace funcionar un httpd Node.js 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

484
2018-02-06 16:36



En Chrome puedes usar esta bandera:

--allow-file-access-from-files

Leer más aquí.


141
2018-05-20 11:36



Se metió en 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 haber sido 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 ahí en caso de que haya otros con un problema similar.


50
2018-02-20 16:27



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


25
2017-12-16 03:01



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

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

También, 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 rápido de PHP y MySQL.


10
2018-03-04 05:24



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


10
2017-12-29 22:15



Voy a enumerar 3 enfoques diferentes para resolver este problema:

  1. Usando un peso muy ligero npm paquete: Instalar servidor en vivo utilizando npm install -g live-server. Luego, vaya a ese directorio abra la terminal y escriba live-server y presiona enter, la página se servirá en localhost:8080. BONUS: también es compatible con la recarga en caliente por defecto.
  2. Usando un Google Chrome ligero aplicación desarrollado por Google: Instale la aplicación, vaya a la pestaña de aplicaciones en Chrome y abra la aplicación. En la aplicación dirígela a la carpeta correcta. Tu página será servida!
  3. Modificar el acceso directo de Chrome en Windows: Crea un acceso directo del navegador Chrome. Haga clic derecho en el ícono y abra propiedades. En propiedades, editar target a "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession" y guarda. Luego, usando Chrome, abre la página usando ctrl+o. NOTA: hacer NO utiliza este atajo para la navegación regular.

6
2017-11-29 06:54