XMLHttpRequest Origin null no está permitido Access-Control-Allow-Origin para el archivo: /// al archivo: /// (sin servidor)


209

Estoy tratando de crear un sitio web que se pueda descargar y ejecutar localmente al iniciar su archivo de índice.

Todos los archivos son locales, no se utilizan recursos en línea.

Cuando intento usar el complemento AJAXSLT para jQuery para procesar un archivo XML con una plantilla XSL (en subdirectorios), recibo los siguientes errores:

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/data/home.xml. Origin null is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/assets/xsl/main.xsl. Origin null is not allowed by Access-Control-Allow-Origin.

El archivo de índice que realiza la solicitud es file:///C:/path/to/XSL%20Website/index.htmlmientras los archivos JavaScript utilizados se almacenan enfile:///C:/path/to/XSL%20Website/assets/js/ .

¿Cómo puedo hacer para solucionar este problema?

Respuestas:


177

Para los casos en los que ejecutar un servidor web local no es una opción, puede permitir el acceso de Chrome a los file://archivos a través de un interruptor de navegador. Después de investigar un poco, encontré esta discusión , que menciona un cambio de navegador en la publicación de apertura. Ejecute su instancia de Chrome con:

chrome.exe --allow-file-access-from-files

Esto puede ser aceptable para entornos de desarrollo, pero poco más. Ciertamente no quieres esto todo el tiempo. Esto todavía parece ser un problema abierto (a partir de enero de 2011).

Consulte también: Problemas con jQuery getJSON al usar archivos locales en Chrome


1
@ Rich, me alegro de que haya ayudado. Me pregunto si habrá una mayor demanda de esto con el impulso de Google hacia las aplicaciones basadas en el navegador. Creo que la demanda solo crecerá.
Courtney Christensen el

44
Esto fue útil para Mac OS X cweagans.net/blog/2011/1/24/…
kinet

1
Gracias, me preguntaba dónde codifiqué mal, parece que el problema es el navegador.
Arda

44
¿Hay alguna razón? --Allow-file-access-from-files no solucionaría el problema. Simplemente estoy tratando de cargar un archivo de secuencia de comandos como $ .getScript ("application.js"); y obtenga el error descrito en la pregunta.
Denzo

1
Sin embargo, esto funciona "Antes de ejecutar el comando, asegúrese de que toda su ventana de Chrome esté cerrada y no se esté ejecutando. De lo contrario, la línea de comando param no sería efectiva". Chrome.exe --allow-file-access-from- archivos "" ( stackoverflow.com/a/4208455/1272428 )
rluks

87

Esencialmente, la única forma de lidiar con esto es tener un servidor web ejecutándose en localhost y servirlos desde allí.

Es inseguro que un navegador permita que una solicitud ajax acceda a cualquier archivo en su computadora, por lo tanto, la mayoría de los navegadores consideran que las solicitudes "file: //" no tienen origen con el propósito de " Política del mismo origen "

Iniciar un servidor web puede ser tan trivial como cdingresar al directorio en el que se encuentran y ejecutan los archivos:

python -m SimpleHTTPServer

1
Espero desarrollar una solución que no requiera que el usuario use nada más que su navegador web. El uso de Python, cualquier intérprete o cualquier software que no sea independiente del sistema no es viable.
Kevin Herrera

55
Bueno, la única otra solución que se me ocurre es cargar todo en una sola página para que no tenga que hacer ninguna solicitud ajax al sistema de archivos.
Singletoned

2
Gracias @Singletoned! Estoy usando tu solución y es muy útil.
Hendy Irawan

44
Y si está utilizando Python 3, el comando sería python -m http.server.
alextercete

4

Aquí hay un AppleScript que lanzará Chrome con el interruptor --allow-file-access-from-files activado, para desarrolladores de OSX / Chrome:

set chromePath to POSIX path of "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"    
set switch to " --allow-file-access-from-files"
do shell script (quoted form of chromePath) & switch & " > /dev/null 2>&1 &"

14
Usted sólo puede usar abierto (1) para agregar las banderas: open -a 'Google Chrome' --args --allow-file-access-from-files.
Josh Lee

4

Esta solución le permitirá cargar un script local usando jQuery.getScript (). Esta es una configuración global, pero también puede configurar la opción crossDomain por solicitud.

$.ajaxPrefilter( "json script", function( options ) {
  options.crossDomain = true;
});

¡funcionó de maravilla para cargar un archivo js local desde un archivo html local! gracias, exactamente lo que necesitaba.
user1577390

4

¿Qué pasa con el uso de la función JavaScript FileReader para abrir el archivo local, es decir:

<input type="file" name="filename" id="filename">
<script>
$("#filename").change(function (e) {
  if (e.target.files != undefined) {
    var reader = new FileReader();
    reader.onload = function (e) {
        // Get all the contents in the file
        var data = e.target.result; 
        // other stuffss................            
    };
    reader.readAsText(e.target.files.item(0));
  }
});
</script>

Ahora haga clic en el Choose filebotón y busque el archivofile:///C:/path/to/XSL%20Website/data/home.xml


3

Lanzamiento de cromo al igual que a esta restricción de bypass: open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files.

Derivado del comentario de Josh Lee, pero necesitaba especificar la ruta completa a Google Chrome para evitar que Google Chrome se abra desde mi partición de Windows (en Parallels).


2

La forma en que acabo de solucionar esto es no usar XMLHTTPRequest en absoluto, sino incluir los datos necesarios en un archivo javascript separado. (En mi caso, necesitaba un blob SQLite binario para usar con https://github.com/kripken/sql.js/ )

Creé un archivo llamado base64_data.js(y solía btoa()convertir los datos que necesitaba e insertarlos en un archivo <div>para poder copiarlos).

var base64_data = "U1FMaXRlIGZvcm1hdCAzAAQA ...<snip lots of data> AhEHwA==";

y luego incluyó los datos en el html como javascript normal:

<div id="test"></div>

<script src="base64_data.js"></script>
<script>
    data = atob(base64_data);
    var sqldb = new SQL.Database(data);
    // Database test code from the sql.js project
    var test = sqldb.exec("SELECT * FROM Genre");
    document.getElementById("test").textContent = JSON.stringify(test);
</script>

Me imagino que sería trivial modificar esto para leer JSON, tal vez incluso XML; Lo dejaré como un ejercicio para el lector;)


1

Usted puede intentar poner 'Access-Control-Allow-Origin':'*'en response.writeHead(, {[here]}).


66
¿de dónde viene response.writeHead, cómo lo llamo y dónde? ¿Puedes dar más ejemplos? Tenga en cuenta que este es un sistema de archivos local, no un servidor. ¿Entiendo que ese valor solo se puede establecer desde un servidor?
Joseph Astrahan

0

use el 'servidor web para la aplicación de Chrome'. (en realidad lo tienes en tu PC, ya sea que lo sepas o no. ¡Solo búscalo en Cortana!). ábralo y haga clic en 'elegir archivo', elija la carpeta con su archivo. en realidad no seleccione su archivo. seleccione su carpeta de archivos y luego haga clic en los enlaces debajo del botón 'elegir carpeta'.

si no lo lleva al archivo, agregue el nombre del archivo a las urs. Me gusta esto:

   https://127.0.0.1:8887/fileName.txt

enlace al servidor web para Chrome: haga clic en mí

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.