XMLHttpRequest Origin null ist nicht zulässig. Access-Control-Allow-Origin für Datei: /// bis Datei: /// (Serverlos)

Ich versuche, eine Website zu erstellen, die heruntergeladen und lokal ausgeführt werden kann, indem die Indexdatei gestartet wird.

Alle Dateien sind lokal, online werden keine Ressourcen verwendet.

Wenn ich versuche, das AJAXSLT-Plugin für jQuery zum Verarbeiten einer XML-Datei mit einer XSL-Vorlage (in Unterverzeichnissen) zu verwenden, werden folgende Fehler angezeigt:

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 Indexdatei, die die Anforderung stellt, befindet sich, file:///C:/path/to/XSL%20Website/index.htmlwährend die verwendeten JavaScript-Dateien in gespeichert werden file:///C:/path/to/XSL%20Website/assets/js/.

Wie kann ich dieses Problem beheben?

In Fällen, in denen das Ausführen eines lokalen Webservers keine Option ist, können Sie Chrome den Zugriff auf file://Dateien über einen Browserwechsel erlauben . Nach einigem Graben fand ich diese Diskussion , in der ein Browserwechsel im Eröffnungsbeitrag erwähnt wird. Führen Sie Ihre Chrome-Instanz aus mit:

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

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

Siehe auch: Probleme mit jQuery getJSON bei der Verwendung lokaler Dateien in Chrome

Im Wesentlichen besteht die einzige Möglichkeit, damit umzugehen, darin, einen Webserver auf localhost auszuführen und von dort aus zu bedienen.

Es ist für einen Browser unsicher, einer Ajax-Anforderung den Zugriff auf eine beliebige Datei auf Ihrem Computer zu ermöglichen. Daher scheinen die meisten Browser "file: //" -Anfragen so zu behandeln, als hätten sie keinen Ursprung im Sinne der " Same Origin Policy ".

Das Starten eines Webservers kann so trivial sein wie das cdAufrufen des Verzeichnisses, in dem sich die Dateien befinden und ausgeführt werden:

python -m SimpleHTTPServer

Hier ist ein Applescript, das Chrome mit aktiviertem Schalter --allow-file-access-from-files für OSX / Chrome-Entwickler startet:

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

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

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

Was ist mit der Verwendung der Javascript FileReader- Funktion zum Öffnen der lokalen Datei, dh:

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

Klicken Sie nun auf die Choose fileSchaltfläche und navigieren Sie zur Dateifile:///C:/path/to/XSL%20Website/data/home.xml

Starten Sie Chrome wie folgt, um diese Einschränkung zu umgehen : open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files.

Abgeleitet von Josh Lees Kommentar, aber ich musste den vollständigen Pfad zu Google Chrome angeben, um zu vermeiden, dass Google Chrome von meiner Windows-Partition (in Parallels) geöffnet wird.

Ich habe das gerade umgangen, indem ich XMLHTTPRequest überhaupt nicht verwendet habe, sondern die benötigten Daten stattdessen in eine separate Javascript-Datei aufgenommen habe. (In meinem Fall benötigte ich einen binären SQLite-Blob zur Verwendung mit https://github.com/kripken/sql.js/ )

Ich habe eine Datei mit dem Namen erstellt base64_data.js(und die btoa()benötigten Daten konvertiert und in eine Datei eingefügt, <div>damit ich sie kopieren kann).

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

und dann die Daten in das HTML wie normales Javascript aufgenommen:

<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 stelle mir vor, es wäre trivial, dies zu ändern, um JSON, vielleicht sogar XML, zu lesen. Ich werde das als Übung für den Leser belassen;)

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

Verwenden Sie den 'Webserver für Chrome App'. (Sie haben es tatsächlich auf Ihrem PC, ob Sie es wissen oder nicht. Suchen Sie es einfach in Cortana!). Öffnen Sie es und klicken Sie auf "Datei auswählen". Wählen Sie den Ordner mit Ihrer Datei aus. Wählen Sie Ihre Datei nicht aus. Wählen Sie Ihren Dateiordner aus und klicken Sie auf die Links unter der Schaltfläche "Ordner auswählen".

Wenn Sie nicht zur Datei gelangen, fügen Sie den Namen der Datei zu urs hinzu. so was:

   https://127.0.0.1:8887/fileName.txt

Link zum Webserver für Chrome: Klicken Sie auf mich