Origin null ist von Access-Control-Allow-Origin nicht zulässig

Ich habe eine kleine xslt-Datei erstellt, um eine HTML-Ausgabe namens weather.xsl mit folgendem Code zu erstellen:

<!-- DWXMLSource="http://weather.yahooapis.com/forecastrss?w=38325&u=c" -->
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
exclude-result-prefixes="yweather"
xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<xsl:output omit-xml-declaration="yes" indent="yes"/>
<xsl:strip-space elements="*"/>

<xsl:template match="/">
    <img src="{/*/*/item/yweather:condition/@text}.jpg"/>
</xsl:template>
</xsl:stylesheet>

Ich möchte die HTML-Ausgabe in ein Div in einer HTML-Datei laden, was ich mit jQuery wie folgt tun möchte:

<div id="result">
<script type="text/javascript">
$('#result').load('weather.xsl');
</script>
</div>

Es wird jedoch die folgende Fehlermeldung angezeigt: Origin null wird von Access-Control-Allow-Origin nicht zugelassen.

Ich habe über das Hinzufügen eines Headers zum xslt gelesen, bin mir aber nicht sicher, wie ich das machen soll. Daher wäre jede Hilfe willkommen. Wenn das Laden in die HTML-Ausgabe nicht auf diese Weise erfolgen kann, dann Ratschläge dazu es zu tun wäre toll.

Origin nullist das lokale Dateisystem. Dies deutet darauf hin, dass Sie die HTML-Seite, die den loadAufruf file:///ausführt, über eine URL laden (z. B. durch Doppelklicken in einem lokalen Dateibrowser oder ähnlichem). Verschiedene Browser verfolgen unterschiedliche Ansätze, um dieselbe Ursprungsrichtlinie auf lokale Dateien anzuwenden .

Ich vermute, dass Sie dies mit Chrome sehen. Die Regeln von Chrome zum Anwenden der SOP auf lokale Dateien sind sehr streng. Das Laden von Dateien aus demselben Verzeichnis wie das Dokument ist nicht zulässig. Opera auch. Einige andere Browser, wie z. B. Firefox, erlauben den eingeschränkten Zugriff auf lokale Dateien. Grundsätzlich funktioniert die Verwendung von Ajax mit lokalen Ressourcen jedoch nicht browserübergreifend.

Wenn Sie nur etwas lokal testen, das Sie wirklich im Web bereitstellen, anstatt lokale Dateien zu verwenden, installieren Sie einen einfachen Webserver und testen Sie http://stattdessen über URLs. Das gibt Ihnen ein viel genaueres Sicherheitsbild.

In Chrome und Safari ist die Verwendung von Ajax mit lokalen Ressourcen eingeschränkt. Deshalb wirft es einen Fehler wie

Origin null ist von Access-Control-Allow-Origin nicht zulässig.

Lösung: Verwenden Sie Firefox oder laden Sie Ihre Daten auf einen temporären Server hoch. Wenn Sie Chrome weiterhin verwenden möchten, starten Sie es mit der folgenden Option.

--allow-file-access-from-files

Weitere Informationen zum Hinzufügen des obigen Parameters zu Chrome: Klicken Sie mit der rechten Maustaste auf das Chrome-Symbol in Ihrer Taskleiste, klicken Sie mit der rechten Maustaste auf Google Chrome im Popup-Fenster, klicken Sie auf Eigenschaften und fügen Sie den obigen Parameter im Textfeld Ziel auf der Registerkarte Verknüpfung hinzu. Es wird wie unten gefallen;

C:\Users\XXX_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

Hoffe das wird helfen!

Ich wollte nur hinzufügen, dass die Antwort "Ausführen eines Webservers" ziemlich entmutigend erscheint, aber wenn Sie Python auf Ihrem System haben (standardmäßig zumindest unter MacOS und jeder Linux-Distribution installiert), ist es so einfach wie:

python -m http.server  # with python3

oder

python -m SimpleHTTPServer  # with python2

Wenn Sie also Ihre HTML-Datei myfile.htmlin einem Ordner mydirhaben, müssen Sie beispielsweise nur Folgendes tun:

cd /path/to/mydir
python -m http.server  # or the python2 alternative above

Zeigen Sie dann mit Ihrem Browser auf:

http://localhost:8000/myfile.html

Und du bist fertig! Funktioniert in allen Browsern , ohne die Websicherheit zu deaktivieren, lokale Dateien zuzulassen oder den Browser mit Befehlszeilenoptionen neu zu starten.

Ich möchte demütig hinzufügen, dass laut dieser SO-Quelle: https://stackoverflow.com/a/14671362/1743693 diese Art von Problem jetzt teilweise einfach mithilfe der folgenden jQuery-Anweisung gelöst wird:

<script> 
    $.support.cors = true;
</script>

Ich habe es auf IE10.0.9200 versucht und es hat sofort funktioniert (mit jquery-1.9.0.js).

Auf Chrome 28.0.1500.95 - diese Anweisung funktioniert nicht (dies geschieht überall, da sich David in den Kommentaren unter dem obigen Link beschwert).

Das Ausführen von Chrome mit --allow-file-access-from-files hat bei mir nicht funktioniert (wie oben von Maistora behauptet)

Ein bisschen hinzufügen, um Gokhans Lösung für die Verwendung zu verwenden:

--allow-file-access-from-files

Jetzt müssen Sie nur noch den obigen Text in den Zieltext einfügen, gefolgt von einem Leerzeichen. Stellen Sie sicher, dass Sie alle Instanzen des Chrome-Browsers schließen, nachdem Sie die obige Eigenschaft hinzugefügt haben. Starten Sie nun Chrome über das Symbol neu, mit dem Sie diese Eigenschaft hinzugefügt haben. Es sollte für alle funktionieren.

Ich suchte nach einer Lösung, um eine XHR-Anfrage von einer lokalen HTML-Datei an einen Server zu stellen, und fand eine Lösung mit Chrome und PHP. (kein Jquery)

Javascripts:

var x = new XMLHttpRequest(); 
if(x) x.onreadystatechange=function(){ 
    if (x.readyState === 4 && x.status===200){
        console.log(x.responseText); //Success
    }else{ 
        console.log(x); //Failed
    }
};
x.open(GET, 'http://example.com/', true);
x.withCredentials = true;
x.send();

Der Anforderungsheader meines Chrome Origin: null

Mein PHP-Antwortheader (Beachten Sie, dass 'null' eine Zeichenfolge ist ). HTTP_REFERER ermöglicht den Cross-Origin von einem Remote-Server zu einem anderen.

header('Access-Control-Allow-Origin: '.(trim($_SERVER['HTTP_REFERER'],'/')?:'null'),true);
header('Access-Control-Allow-Credentials:true',true);

Ich konnte erfolgreich eine Verbindung zu meinem Server herstellen. Sie können die Header für Anmeldeinformationen ignorieren, dies funktioniert jedoch bei AuthType Basicaktiviertem Apache

Ich habe die Kompatibilität mit FF und Opera getestet. Es funktioniert in vielen Fällen wie:

Von einer VM LAN-IP (192.168.0.x) zurück zur WAN-IP (öffentlich) der VM: port
Von einer VM LAN-IP zurück zu einem Remoteserver-Domänennamen.
Von einer lokalen HTML-Datei zum VM LAN IP- und / oder VM WAN IP:
-Port , Von einer lokalen HTML-Datei zu einem Remoteserver-Domänennamen.
Und so weiter.

Sie können eine lokale Javascript-Datei (in der Baumstruktur unter Ihrer file:/Quellseite) mit dem Quell-Tag laden :

<script src="my_data.js"></script>

Wenn Sie Ihre Eingabe in Javascript codieren, wie in diesem Fall:

mydata.js :

$xsl_text = "<xsl:stylesheet version="1.0" + ....

(Dies ist für json einfacher) Dann haben Sie Ihre 'Daten' in einer globalen Javascript-Variablen, die Sie nach Ihren Wünschen verwenden können.