J
j-l-n
Guest
CORS (Cross-Origin Resource Sharing) ermöglicht es, mit JavaScript auf Websites zuzugreifen, die auf anderen Domains liegen. Normalerweise ist dies nicht möglich, da es durch die Same-Origin-Policy (SOP) verhindert wird.
Die Browserunterstützung ist in allen Browsern relativ gut. Einzige Ausnahmen bilden der Internet Explorer 8 und 9, da sie keine XMLHTTPRequests, sondern XDomainRequests benutzen.
=> XDomainRequest - Restrictions, Limitations and Workarounds - IEInternals - Site Home - MSDN Blogs
Eine ausführliche Anleitung, basierend auf "purem" JavaScript, die auch den IE 8/9 (XDomainRequests) unterstützt:
Using CORS - HTML5 Rocks
Ein simples Beispiel:
Serverseitig müssen auf der anderen Webseite, von der Inhalt geladen werden soll, folgende Header mitgesendet werden, um CORS zu ermöglichen:
Auf Client-Seite setzen wir auf die jQuery Ajax-API, die uns das Ganze sehr einfach macht:
Die Browserunterstützung ist in allen Browsern relativ gut. Einzige Ausnahmen bilden der Internet Explorer 8 und 9, da sie keine XMLHTTPRequests, sondern XDomainRequests benutzen.
=> XDomainRequest - Restrictions, Limitations and Workarounds - IEInternals - Site Home - MSDN Blogs
Eine ausführliche Anleitung, basierend auf "purem" JavaScript, die auch den IE 8/9 (XDomainRequests) unterstützt:
Using CORS - HTML5 Rocks
Ein simples Beispiel:
Serverseitig müssen auf der anderen Webseite, von der Inhalt geladen werden soll, folgende Header mitgesendet werden, um CORS zu ermöglichen:
PHP:
header("Access-Control-Allow-Origin: example.com"); //nur Requests von den angegeben Domains aus erlauben
header("Access-Control-Allow-Credentials: true"); //"Credentials" (Cookies, ...) mitsenden
header("Access-Control-Allow-Methods: GET, POST"); //erlaubte HTTP-MethodenAuf Client-Seite setzen wir auf die jQuery Ajax-API, die uns das Ganze sehr einfach macht:
HTML:
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js">
<script type="text/javascript">
$.ajax({
url: 'http://another-domain.example.org/script.php', //URL, an die der Request geschickt werden soll
type: "POST", //Typ des Requests (z.B. GET oder POST)
contentType: 'text/plain', //Content-Type festlegen
xhrFields:{
withCredentials = true //Cross-Domain Request ermöglichen
},
success: function(data){
alert("HTML geladen von " + url + ": \n\n" + data); //bei Erfolg geladenen Inhalt ausgeben
},
error: function(e){
alert("Fehler!");
}
});
</script>
Zuletzt bearbeitet:
