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

183

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.

dudledok
quelle
Ist das dein eigentlicher load Anruf? Es gibt überhaupt keinen Weg?
TJ Crowder

Antworten:

227

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.

TJ Crowder
quelle
1
Nachdem ich es hochgeladen habe, erhalte ich Origin nicht mehr null, aber ich erhalte immer noch "von Access-Control-Allow-Origin nicht erlaubt".
Dudledok
3
Wenn die Ressource, die Sie laden, so ist, wie Sie es gezeigt haben ( $('#result').load('weather.xsl');), sollte dies nicht passieren, da die Anforderung eindeutig denselben Ursprung hat. Wenn Sie versuchen, von einem anderen Ort (z. B. $('#result').load('http://somewhere.else/weather.xsl');) zu laden , stoßen Sie erneut auf die SOP, jedoch auf andere Weise. Ajax-Anforderungen sind auf denselben Ursprung beschränkt (siehe Link in der Antwort). Wenn Sie einen CORS- fähigen Browser verwenden und der Server CORs unterstützt, kann der Server auswählen, ob die Ursprungsübergreifende Anforderung zugelassen werden soll.
TJ Crowder
Ich habe die Lade-URL geändert. Wenn Sie es wieder auf das fragliche ändern, wird es problemlos geladen. Vielen Dank für die Hilfe
dudledok
2
Was ist der einfachste und schnellste Weg, um einen einfachen Webserver einzurichten? Wäre IIS hier der einfachste Weg?
Ciaran Gallagher
13
@CiaranG Ich lief python -m SimpleHTTPServervon einer Kommandozeile und ging dann zu localhost: 8000, arbeitete für mich. Python ist mit Mac OS X vorinstalliert. Möglicherweise müssen Sie installieren, wenn Sie ein anderes Betriebssystem verwenden.
Dave Liepmann
216

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!

Gokhan Panzer
quelle
19
Unter Mac OS X können Sie Chrome mit dieser Option starten, indem Sie ein Terminal öffnen und Folgendes eingeben: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files & Beachten Sie das letzte &, damit Sie das Terminal weiterhin verwenden können und es nicht erforderlich ist. HINWEIS: Wenn Sie das Terminal schließen, wird das Chrome-Fenster geschlossen.
Bruno Bernardino
3
Hab das alles gemacht und geschlossen und geöffnet. immer noch nicht los (Chrome 27.0.1453.116 m unter XP)
mplungjan
Ich kann diesen Parameter unter Windows 8 nicht hinzufügen ..., wer weiß, wie es geht? ...
Morty
Ich bin läuft von einem Webserver. Was zum Teufel? Wie kann ich herausfinden, wo lokale Dateien geladen werden?
Andy
Wenn ich versuche, --allow-file-access-from-files zum Zielpfad hinzuzufügen, wird die Meldung ".... ungültig" angezeigt. Ist diese Lösung noch gültig?
Alex
48

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.

gozzilli
quelle
2
Python 3-Äquivalent unter Windows ist: Python -m http.server [<portNo>]
Aragorn
Python 3: Python3-m http.server
João Nunes
Python 2 unter Linux, Auswahl des 8080-Ports (oder eines anderen gewünschten Ports):python -m SimpleHTTPServer 8080
Rodrigo
2

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)

Orberkov
quelle
2

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.

Saurabh
quelle
Der Parameter wurde bereits von Ghokan Tank vorgestellt und es ist nicht Teil der Frage, herauszufinden, wie der Browser immer mit diesem Parameter gestartet werden kann. Außerdem können Sie nicht davon ausgehen, dass jeder Microsoft Windows verwendet.
20.
0

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.

Louis Loudog Trottier
quelle
0

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.

Reich
quelle