wake-up-neo.net

XMLHttpRequest no puede cargar el archivo. Las solicitudes de origen cruzado solo son compatibles con HTTP

Estoy teniendo el siguiente error:

XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross Origin requests are only supported for HTTP. 

Me doy cuenta de que esta pregunta ha sido respondida antes, pero aún no he encontrado una solución a mi problema. Intenté ejecutar chrome.exe --allow-file-access-from-files desde el símbolo del sistema y moví el archivo al sistema de archivos local, pero sigo recibiendo el mismo error.

Agradezco cualquier sugerencia!

107
xTMNTxRaphaelx

Si está haciendo algo como escribir HTML y Javascript en un editor de código en su computadora personal y probar la salida en su navegador, probablemente recibirá mensajes de error sobre Cross Origin Requests. Su navegador mostrará HTML y ejecutará Javascript, jQuery, angularJs en su navegador sin necesidad de configurar un servidor. Pero muchos navegadores web están programados para detectar ataques entre sitios y bloquearán las solicitudes. No desea que cualquiera pueda leer su disco duro desde su navegador web. Puede crear una página web totalmente funcional con Notepad ++ que ejecutará Javascript, y marcos como jQuery y angularJs; y pruebe todo simplemente utilizando el elemento de menú Notepad ++, RUN, LAUNCH IN FIREFOX. Es una forma agradable y fácil de comenzar a crear una página web, pero cuando comienza a crear algo más que diseño, css y navegación sencilla de páginas, necesita un servidor local configurado en su máquina.

Aquí hay algunas opciones que uso.

  1. Pruebe su página web localmente en Firefox, luego despliegue en su Host.
  2. o: Ejecutar un servidor local

Prueba en Firefox, Implementar en Host

  1. Actualmente, Firefox permite las solicitudes de origen cruzado de los archivos servidos desde su disco duro
  2. Su sitio de alojamiento web permitirá solicitudes de archivos en carpetas según lo configurado por el archivo de manifiesto

Ejecutar un servidor local

  • Ejecuta un servidor en tu computadora, como Apache o Python
  • Python no es un servidor, pero ejecutará un servidor simple

Ejecutar un servidor local con Python

Obtenga su dirección IP:

  • En Windows: abra el 'Símbolo del sistema'. Todos los programas, accesorios, símbolo del sistema
  • Siempre ejecuto el Command Prompt como Administrator. Haga clic con el botón derecho en el elemento del menú Command Prompt y busque Run As Administrator
  • Escribe el comando: ipconfig y presiona Enter.
  • Busque: Dirección IPv4. . . . . . . . 12.123.123.00
  • Hay sitios web que también mostrarán su dirección IP

Si no tienes Python, descárgalo e instálalo.

Usando el 'Símbolo del sistema', debe ir a la carpeta donde se encuentran los archivos que desea que sirvan como página web.

  • Si necesita volver al directorio C:\Root, escriba cd /
  • escriba cd Drive:\Folder\Folder\etc para acceder a la carpeta donde se encuentra su archivo .Html (o php, etc.)
  • Revisa el camino. escriba: ruta en el comando. Debes ver la ruta a la carpeta donde se encuentra Python. Por ejemplo, si python está en C:\Python27, entonces debe ver esa dirección en las rutas que se enumeran.
  • Si la ruta al directorio de Python no está en la ruta, debe establecer la ruta. escribe: ruta de ayuda y pulsa Intro. Verás ayuda por camino.
  • Escribe algo como: ruta c:\python27% ruta%
  • % path% mantiene todas tus rutas actuales. No desea borrar todas las rutas actuales, solo agregue una nueva ruta.
  • Cree la nueva ruta DESDE la carpeta donde desea servir los archivos.
  • Inicie el servidor Python: Escriba: python -m SimpleHTTPServer port Donde 'puerto' es el número del puerto que desea, por ejemplo python -m SimpleHTTPServer 1337
  • Si deja el puerto vacío, el puerto predeterminado es 8000
  • Si el servidor de Python se inicia correctamente, verá un msg.

Ejecuta tu aplicación web localmente

  • Abrir un navegador
  • En la línea de dirección escribe: http://your IP address:port
  • http://xxx.xxx.x.x:1337 o http://xx.xxx.xxx.xx:8000 para el valor predeterminado
  • Si el servidor está funcionando, verá una lista de sus archivos en el navegador
  • Haga clic en el archivo que desea servir y debería aparecer.

Soluciones más avanzadas

  • Instale un editor de código, un servidor web y otros servicios que estén integrados.

Puede instalar Apache, PHP, Python, SQL, Depuradores, etc. por separado en su máquina, y luego pasar mucho tiempo intentando descubrir cómo hacer que todos funcionen juntos, o buscar una solución que combine todas esas cosas.

Me gusta usar XAMPP con NetBeans IDE. También puede instalar WAMP, que proporciona un User Interface para administrar e integrar Apache y otros servicios.

152
Alan Wells

Solución simple

Si está trabajando con archivos HTML puros/js/css.

Instale esta aplicación de servidor pequeño ( link ) en Chrome. Abra la aplicación y apunte la ubicación del archivo al directorio de su proyecto.

Ir a la url que se muestra en la aplicación.

Edición: Solución más inteligente usando Gulp

Paso 1: Para instalar Gulp. Ejecute el siguiente comando en su terminal.

npm install gulp-cli -g
npm install gulp -D

Paso 2: Dentro del directorio de su proyecto, cree un archivo llamado gulpfile.js. Copia el siguiente contenido en su interior.

var gulp        = require('gulp');
var bs          = require('browser-sync').create();   

gulp.task('serve', [], () => {
        bs.init({
            server: {
               baseDir: "./",
            },
            port: 5000,
            reloadOnRestart: true,
            browser: "google chrome"
        });
        gulp.watch('./**/*', ['', bs.reload]);
});

Paso 3: Instalar el complemento de sincronización del navegador. Dentro del mismo directorio donde está presente gulpfile.js, ejecute el siguiente comando

npm install browser-sync gulp --save-dev

Paso 4: Iniciar el servidor. Dentro del mismo directorio donde está presente gulpfile.js, ejecute el siguiente comando

gulp serve
87
Sushant Kr

Este error está ocurriendo porque está abriendo documentos html directamente desde el navegador. Para solucionar este problema, deberá proporcionar su código desde un servidor web y acceder a él en localhost. Si tiene la configuración de Apache, úsela para servir sus archivos. Algunos IDE han incorporado servidores web, como JetBrains IDE, Eclipse ...

Si tiene la configuración de Node.Js, puede usar http-server . Simplemente ejecute npm install http-server -g y podrá usarlo en el terminal como http-server C:\location\to\app.Kirill Fuchs

2
MEAbid

Me enfrenté a este error mientras implementaba mi proyecto de API web localmente y estaba llamando al proyecto de API solo con la siguiente URL:

localhost // myAPIProject

Como el mensaje de error dice que no es http: //, cambié la URL y puse el prefijo http como se indica a continuación y el error desapareció.

http: // localhost // myAPIProject

1
Usman

Depende de sus necesidades, pero también hay una manera rápida de verificar temporalmente su JSON (ficticio) guardando su JSON en http://myjson.com . Copia el enlace de la API y pégalo en tu código javascript. ¡Viola! Cuando quiera implementar los códigos, ¡no debe olvidar cambiar la url en sus códigos!

0
user5613899

Si usa WebStorm Javascript IDE , puede abrir su proyecto desde WebStorm en su navegador. WebStorm iniciará automáticamente un servidor y ya no obtendrá ninguno de estos errores, ya que ahora está accediendo a los archivos con los protocolos permitidos/compatibles (HTTP).

0
mathew11