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-filesdesde el símbolo del sistema y moví el archivo al sistema de archivos local, pero sigo recibiendo el mismo error.

¡Agradezco cualquier sugerencia!

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 Cross Origin Requests. Su navegador renderizará HTML y ejecutará Javascript, jQuery, angularJs en su navegador sin necesidad de configurar un servidor. Pero muchos navegadores web están programados para estar atentos a los ataques entre sitios y bloquearán las solicitudes. No quiere que cualquiera pueda leer su disco duro desde su navegador web. Puede crear una página web completamente funcional usando Notepad ++ que ejecutará Javascript y marcos como jQuery y angularJs; y pruebe todo con solo usar el elemento de menú Notepad ++,RUN, LAUNCH IN FIREFOX. Esa es una manera 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 de página simple, necesita un servidor local configurado en su máquina.

Aquí hay algunas opciones que utilizo.

1. Pruebe su página web localmente en Firefox, luego impleméntela en su host.
2. o: ejecutar un servidor local

Probar en Firefox, implementar en el host

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

Ejecutar un servidor local

• Ejecute un servidor en su 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 Promptas Administrator. Haga clic con el botón derecho en el Command Promptelemento del menú y busqueRun As Administrator
• Escribe el comando: ipconfigy presiona Enter.
• Busque: Dirección IPv4. . . . . . . . 12.123.123.00
• Hay sitios web que también mostrarán su dirección IP.

Si no tiene Python, descárguelo e instálelo.

Usando el 'Símbolo del sistema' debe ir a la carpeta donde están 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 llegar a la carpeta donde está su archivo .Html (o php, etc)
• Comprueba el camino. escriba: ruta en el símbolo del sistema. Debe 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. escriba: ruta de ayuda y presione Enter. Verá ayuda para el camino.
• Escriba algo como: ruta c: \ python27% ruta%
• % path% mantiene todas sus rutas actuales. No desea borrar todas sus rutas actuales, solo agregue una nueva ruta.
• Cree la nueva ruta DESDE la carpeta donde desea entregar los archivos.
• Inicie el servidor Python: Escriba: python -m SimpleHTTPServer portdonde 'puerto' es el número del puerto que desea, por ejemplopython -m SimpleHTTPServer 1337
• Si deja el puerto vacío, el valor predeterminado es el puerto 8000
• Si el servidor Python se inicia correctamente, verá un mensaje.

Ejecute su aplicación web localmente

• Abrir un navegador
• En la línea de dirección, escriba: http://your IP address:port
• http://xxx.xxx.x.x:1337 o http://xx.xxx.xxx.xx:8000por defecto
• 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 integrados.

Puede instalar Apache, PHP, Python, SQL, depuradores, etc., todo por separado en su máquina, y luego pasar mucho tiempo tratando de averiguar 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 una herramienta User Interfacepara administrar e integrar Apache y otros servicios.

Solución simple

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

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

Vaya a la URL que se muestra en la aplicación.

Editar: 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. Copie 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: Instale 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: Inicie el servidor. Dentro del mismo directorio donde está presente gulpfile.js, ejecute el siguiente comando

gulp serve

Este error ocurre porque solo está abriendo documentos html directamente desde el navegador. Para solucionar este problema, deberá entregar 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 tienen servidores web integrados, como los IDE de JetBrains, Eclipse ...

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

Para agregar a Alan Wells la respuesta elaborada de , aquí hay una solución rápida

Ejecutar un servidor local

puede servir cualquier carpeta en su computadora con Serve

Primero, navegue usando la línea de comando hasta la carpeta que le gustaría servir.

Luego

npx i -g serve
serve

o si desea probar Serve descargándolo

npx serve

¡y eso es! Puede ver sus archivos en http: // localhost: 5000

Me enfrentaba a este error mientras implementaba mi proyecto de API web localmente y estaba llamando al proyecto de API solo con esta URL que se proporciona a continuación:

localhost // myAPIProject

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

http: // localhost // myAPIProject

Si utiliza 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, porque ahora está accediendo a los archivos con los protocolos permitidos / admitidos (HTTP).

Depende de sus necesidades, pero también hay una forma rápida de verificar temporalmente su JSON (ficticio) guardando su JSON en http://myjson.com . Copie el enlace de la API y péguelo en su código JavaScript. ¡Viola! Cuando desee implementar los códigos, ¡no debe olvidar cambiar esa URL en sus códigos!

Coloque su carpeta de proyecto en el htdocs del directorio Xampp Inicie su servidor Apache usando el panel de control de xampp, luego abra un navegador goto localhost / projectfolder y luego comience a funcionar