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

Estoy recibiendo 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 todavía 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 todavía obtengo el mismo error.

Agradezco cualquier sugerencia!

Author: JohnnyCoder, 2013-11-18
Source

7 answers

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 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 de sitios cruzados, y bloquearán las solicitudes. No quieres que cualquiera pueda leer tu disco duro desde tu web navegador. Puede crear una página web completamente funcional usando Notepad++ que ejecutará Javascript y frameworks como jQuery y AngularJS; y probar todo simplemente usando 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 uso.

  1. Pruebe su página web localmente en Firefox, luego implemente en su host.
  2. o: Ejecute un servidor local

Prueba en Firefox, Desplegar en 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 configuradas por el archivo de manifiesto

Ejecute un Servidor Local

  • Ejecute un servidor en su computadora, como Apache o Python
  • Python no es un servidor, pero se ejecutará un servidor simple

Ejecute 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 corro el Command Prompt como Administrator. Haga clic derecho en el elemento de menú Command Prompt y busque Run As Administrator
  • Escriba el comando: ipconfig y presione Enter.
  • Busque: Dirección IPv4. . . . . . . . 12.123.123.00
  • Hay sitios web que también mostrarán su IP dirección

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

Usando el 'Símbolo del sistema' debe ir a la carpeta donde están los archivos que desea servir como página web.

  • Si necesita volver al directorio raíz C:\, escriba cd /
  • escriba cd Drive:\Folder\Folder\etc para llegar a la carpeta donde su.El archivo Html es (o php, etc.)
  • Compruebe la ruta. type: path en el símbolo del sistema. Debe ver la ruta a la carpeta donde python está localizado. Por ejemplo, si python está en C:\Python27, a continuación, debe ver esa dirección en las rutas que se enumeran.
  • Si la ruta al directorio Python no está en la ruta, debe establecer la ruta. escriba: ruta de ayuda y presione Enter. Verás ayuda para path.
  • Escriba algo como: ruta c:\python27 % path %
  • %path% mantiene todas sus rutas actuales. No quieres borrar todas tus rutas actuales, simplemente añade una nueva.
  • Crear la nueva ruta DESDE el carpeta donde desea servir los archivos.
  • Inicie el servidor Python: Escriba: python -m SimpleHTTPServer port Donde 'port' es el número del puerto que desea, por ejemplo python -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 msg.

Ejecute Su Aplicación Web Localmente

  • Abre 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:8000 por defecto
  • Si el el servidor está funcionando, verá una lista de sus archivos en el navegador
  • Haga clic en el archivo que desea servir, y debería mostrarse.

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. todos por separado en su máquina, y luego pasar mucho tiempo tratando de averiguar cómo hacer que todos trabajen juntos, o buscar una solución que combina 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.

 148
Author: Sandy Good,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-25 19:07:50

Solución simple

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

Instala esta pequeña aplicación de servidor(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.

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 del proyecto crea un archivo se llama gulpfile.js. Copie el siguiente contenido dentro de él.

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 navegador sync gulp plugin. Dentro del mismo directorio donde gulpfile.js está presente, ejecute el siguiente comando

npm install browser-sync gulp --save-dev

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

gulp serve
 87
Author: Sushant Kr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-14 16:41:16

Este error se debe a que acaba de abrir documentos html directamente desde el navegador. Para solucionar esto, tendrá que servir su código desde un servidor web y acceder a él en localhost. Si tiene la configuración de Apache, utilícela para servir sus archivos. Algunos IDE han construido servidores web, como el IDE de JetBrains, Eclipse...

Si tiene Nodo.Js setup entonces puede usar http-server. Simplemente ejecute npm install http-server -g y podrá usarlo en terminales como http-server C:\location\to\app. Kirill Fuchs

 2
Author: MEAbid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:10:48

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 muestra a continuación:

Localhost / / myAPIProject

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

Http://localhost//myAPIProject

 1
Author: usman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-26 04:24:21

Si utiliza el IDE Javascript WebStorm, 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/soportados (HTTP).

 0
Author: mathew11,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-22 09:41:37

Depende de sus necesidades, pero también hay una forma rápida de comprobar 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!

 0
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-05 14:30:52

Coloque su carpeta de proyecto en los htdocs del directorio Xampp Inicie su servidor Apache usando el panel de control de xampp a continuación, abra un navegador goto localhost / carpeta de proyectos entonces comienza a trabajar

 -2
Author: sunil KV,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-26 19:35:07