Bei der Entwicklung von Webapps oder modernen Webseiten steht man zwangsläufig vor dem Problem, dass man Ajax Requests zu anderen Domains oder Subdomains machen muss.
Als Cross Ajax Requests gilt auch schon ein Requests von http://foo.de zu https://foo.de.
Wennn man dies versucht kriegt man im Chrome und Safari die folgende Fehlermeldung auf der Javascript Konsole:
XMLHttpRequest cannot load Origin http://foo2.de is not allowed by Access-Control-Allow-Origin.
und ein Fehlerobject zurück:
Object {readyState: 0, status: 0, statusText: "Error: NETWORK_ERR: XMLHttpRequest Exception 101"}
Im Firefox bei Verwendung einer von Google gehosteten jQuery Version erhält man nur die kryptische Nachricht:
"[Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js :: <TOP_LEVEL> :: line 2" data: no]"
Um dies zu vermeiden muss im im aufzurufenden PHP Script nur der Header modifiziert werden und die aufrufenden Domäne zu den berechtigten Domänen der Access-Control-Allow-Origin hinzugefügt werden:
header('Access-Control-Allow-Origin: http://www.domain1.de');
Hier ein kleines Testskript:
Auf Domain1:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$.ajax(
{
async: false,
type: "POST",
url: "http://domain1.de/cross-ajax.php",
data:
{
username: "username1",
password : "password1"
},
dataType: "json",
beforeSend: function (jqXHR, settings) {
console.log(settings.url);
console.log(settings.data);
},
success: function (response) {
alert("success");
console.log((response));
},
error: function (response)
{
console.log((response));
}
}
);
</script>
Auf Domain2:
<?php
header('Access-Control-Allow-Origin: http://www.domain1.de');
echo "cross ajax request funktioniert. Post Variable password: ".$_POST['password'];