XMLHttpRequest Origin null no está permitido Access-Control-Allow-Origin para file:/// a file:/// (sin servidor)

Question

Estoy intentando crear un sitio web que se pueda descargar y ejecutar localmente iniciando su archivo de índice.

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

Cuando intento utilizar 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.html mientras que los archivos JavaScript utilizados se almacenan en file:///C:/path/to/XSL%20Website/assets/js/.

¿Cómo puedo hacer para solucionar este problema?

Answer 1

En los casos en que la ejecución de un servidor web local no es una opción, se puede permitir el acceso a los archivos file:// Chrome a través de un interruptor navegador. Después de algo de investigación, encontré esta discusión , que menciona una interruptor de navegador en el puesto de apertura. Ejecutar la instancia de Chrome con:

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

Esto puede ser aceptable para los entornos de desarrollo, pero poco más. desde luego no quiere esto en todo el tiempo. Esto todavía parece ser un tema abierto (a partir de ene 2011).

Ver también: Problemas con jQuery usando getJSON archivos locales en Chrome

Answer 2

En esencia, la única manera de lidiar con esto es tener un servidor web que se ejecuta en localhost y servirlos a partir de ahí.

Es insegura para un navegador para permitir una petición AJAX para acceder a cualquier archivo en su ordenador, por lo tanto, la mayoría de los navegadores parecen tratar "file: //" peticiones como que no tiene origen con el propósito de " política del mismo origen "

A partir de un servidor web puede ser tan trivial como cding en el directorio de los archivos están en funcionamiento:

python -m SimpleHTTPServer

Answer 3

Aquí es un AppleScript que lanzará Chrome con el --allow-file-access-from-archivos interruptor de encendido, para OSX / Chrome proyectos de desarrollo por ahí:

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 &"

Answer 4

Esta solución le permitirá cargar un script local utilizando jQuery.getScript (). Esta es una configuración global pero también se puede establecer la opción crossdomain en función de cada petición.

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

Answer 5

¿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 botón Choose file y Examinar Haga clic en el archivo de file:///C:/path/to/XSL%20Website/data/home.xml

Answer 6

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 de Josh comentario de Lee pero necesitaba para especificar la ruta completa a Google Chrome a fin de evitar que tiene una abertura de Google Chrome de mi partición de Windows (en Parallels).

Answer 7

La forma en que trabajamos entre éste no es el uso de XMLHTTPRequest en absoluto, sino que incluyen los datos necesarios en un archivo JavaScript independiente en lugar. (En mi caso necesitaba una gota SQLite binario para su uso con https://github.com/kripken/sql Js / )

He creado un archivo llamado base64_data.js (y btoa() utilizados para convertir los datos que necesitaba y la inserta en un <div> para que pudiera copiarlo).

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

y, a continuación incluye 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 para modificar esto para leer JSON, tal vez incluso XML; Lo dejo como ejercicio para el lector;)

Answer 8

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

Answer 9

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

Si no lo lleva al archivo, agregue el nombre del archivo a urs.como esto:

   https://127.0.0.1:8887/fileName.txt

enlace al servidor web para Chrome: Haz click en mi