XMLHttpRequest Null ist nicht zulässig. Access-Control-Allow-Origin für Datei: /// zu Datei: /// (Serverless)

Question

Ich versuche, eine Website zu erstellen, die heruntergeladen und lokal ausgeführt werden kann, indem sie ihren Index startet Datei.

Alle Dateien sind lokal, keine Ressourcen werden online verwendet.

Wenn ich versuche, das AJAXSLT Plugin zu verwenden, um jQuery eine XML-Datei mit einer XSL-Vorlage (in Unterverzeichnissen) zu verarbeiten, erhalte ich folgende Fehler:

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.

Die Die Indexdatei, die die Anfrage erstellt, ist file:///C:/path/to/XSL%20Website/index.html, während die verwendeten JavaScript-Dateien in file:///C:/path/to/XSL%20Website/assets/js/ gespeichert sind.

Wie kann ich dieses Problem beheben?

Answer 1

Für Fälle, in denen ein lokaler Webserver ausgeführt wird, ist keine Option, können Sie Chrome Zugriff auf file:// Dateien über ein erlauben Browser wechseln. Nach etwas graben fand ich this discussion, die einen Browser-Schalter im Eröffnungsbeitrag erwähnt. Führen Sie Ihre Chrome-Instanz mit:

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

Dies kann für Entwicklungsumgebungen, aber sonst wenig akzeptabel. Sie wollen das sicher nicht die ganze Zeit. Dies scheint immer noch ein offenes Thema zu sein (Stand Januar 2011).

Siehe auch: Problems with jQuery getJSON using local files in Chrome

Answer 2

Im Wesentlichen ist die einzige Möglichkeit, dies zu tun, einen Webserver auf localhost zu betreiben und sie von dort aus zu bedienen.

Es ist unsicher für einen Browser einer Ajax-Anforderung zu ermöglichen, jede Datei auf Ihrem Computer zuzugreifen, also die meisten Browser zu behandeln scheinen „file: //“ Anfragen als für die Zwecke des „Same Origin Policy“

keine Ursprünge

einen Webserver starten als trivial sein kann als cd das Verzeichnis ing in die Dateien und laufen sind:

python -m SimpleHTTPServer 

Answer 3

Hier ist ein Applescript ist, dass Chrome mit dem --allow-file-access-from-Dateien Schalter eingeschaltet, für OSX/Chrome Devs dort starten wird:

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

Sie können 'Access-Control-Allow-Origin':'*' in response.writeHead(, {[here]}) setzen.

Answer 5

Mit dieser Lösung können Sie ein lokales Skript mit jQuery.getScript() laden. Dies ist eine globale Einstellung, Sie können die crossDomain-Option jedoch auch einzeln festlegen.

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

Answer 6

Was die javascript FileReader Funktion mit der lokalen Datei zu öffnen, das heißt:

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

Jetzt Choose file Taste klicken und file:///C:/path/to/XSL%20Website/data/home.xml

Answer 7

Starten Chrom in die Datei zu sehen, wie so diese Einschränkung zu umgehen : open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files.

Abgeleitet von Josh Lee's comment, aber ich musste den vollständigen Pfad zu Google Chrome angeben, damit Google Chrome nicht von meiner Windows-Partition (in Parallels) geöffnet wird.

Answer 8

Die Art, wie ich gerade daran gearbeitet habe, ist überhaupt nicht XMLHTTPRequest zu verwenden, sondern stattdessen die Daten in einer separaten Javascript-Datei enthalten. (In meinem Fall brauchte ich eine binäre SQLite Blob mit https://github.com/kripken/sql.js/ zu verwenden)

Ich habe eine Datei namens base64_data.js (und verwendet btoa() die Daten zu konvertieren, die ich brauchte, und fügen Sie ihn in eine <div> so konnte ich es kopieren).

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

und dann enthalten die Daten im html wie normale javascript:

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

ich es mir vorstelle wäre trivial, dies zu ändern JSON zu lesen, vielleicht sogar XML; Ich lasse das als eine Übung für den Leser;)