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

209

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?

Kevin Herrera
quelle

Antworten:

177

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

Courtney Christensen
quelle
1
@ Rich, froh, dass es geholfen hat! Ich frage mich, ob dies mit Googles Vorstoß zu browserbasierten Apps eine größere Nachfrage nach sich ziehen wird. Ich denke, die Nachfrage wird nur wachsen.
Courtney Christensen
4
Dies war hilfreich für Macs OS X cweagans.net/blog/2011/1/24/…
Kinet
1
Danke, ich habe mich gefragt, wo ich falsch codiert habe, anscheinend ist der Browser das Problem.
Arda
4
Gibt es einen Grund, warum --allow-file-access-from-files das Problem nicht beheben würde. Ich versuche einfach, eine Skriptdatei wie $ .getScript ("application.js") zu laden; und erhalten Sie den in der Frage beschriebenen Fehler.
Denzo
1
Dies funktioniert jedoch. "Bevor Sie den Befehl ausführen, stellen Sie sicher, dass Ihr gesamtes Chrome-Fenster geschlossen ist und nicht anderweitig ausgeführt wird. Andernfalls ist der Befehlszeilenparameter nicht wirksam." Chrome.exe --allow-file-access-from- files "" ( stackoverflow.com/a/4208455/1272428 )
rluks
87

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
Singletoned
quelle
1
Ich hoffe, eine Lösung zu entwickeln, bei der der Benutzer nur seinen Webbrowser verwenden muss. Die Verwendung von Python, eines Interpreters oder einer nicht systemunabhängigen Software ist nicht möglich.
Kevin Herrera
5
Nun, die einzige andere Lösung, die ich mir vorstellen kann, besteht darin, das Ganze auf einer einzigen Seite zu laden, damit Sie keine Ajax-Anfragen an das Dateisystem stellen müssen.
Singletoned
2
Vielen Dank, dass Sie @Singletoned! Ich benutze Ihre Lösung und es ist sehr praktisch!
Hendy Irawan
4
Und wenn Sie Python 3 verwenden, wäre der Befehl python -m http.server.
Alextercete
4

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 &"
ericsoco
quelle
14
Sie können einfach open (1) verwenden , um die Flags hinzuzufügen : open -a 'Google Chrome' --args --allow-file-access-from-files.
Josh Lee
4

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;
});
Renaud
quelle
funktionierte wie ein Zauber zum Laden einer lokalen JS-Datei aus einer lokalen HTML-Datei! Danke, genau das, was ich brauchte.
user1577390
4

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

suhailvs
quelle
3

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.

Stunner
quelle
2

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

Anthony Briggs
quelle
1

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

Shikon
quelle
6
Woher kommt response.writeHead, wie nenne ich es und wo? Können Sie weitere Beispiele nennen? Beachten Sie, dass dies ein lokales Dateisystem und kein Server ist. Mein Verständnis ist, dass Wert nur von einem Server eingestellt werden kann?
Joseph Astrahan
0

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

Person der Mensch
quelle