XMLHttpRequest sur un domaine différent : comment paramétrer Access-Control-Allow-Origin ?

Un script encapsulé dans JSON permet d'interagir avec d'autres sites web. Voici comment y recourir.

L'objet XMLHttpRequest (XHR) permet d'effectuer des requêtes AJAX vers des pages. Si cet objet est très utilisé dans les sites internet aujourd'hui, il possède des limitations dans son utilisation. Le header Access-Control-Allow-Origin a une valeur égale à null quand on envoie une requête, et ce n'est pas modifiable. L'objet XHR a une utilisation restreinte au domaine dans lequel la requête est créée. On ne peut pas effectuer une requête vers un autre domaine. La seule exception réside dans les extensions du navigateur Chrome qui peuvent effectuer librement des requêtes AJAX dans d'autres domaines avec XHR.

Il existe cependant d'autres méthodes pour qu'une page web puisse accéder aux ressources d'un autre site web. JSONP est une technique de communication permettant d'interagir avec d'autres sites web. Il s'agit d'un script encapsulé dans du JSON, et les scripts ne sont pas limités par le domaine. L'utilisation de JSONP nécessite de passer une fonction qui sera appelée une fois les données récupérées. La plupart des frameworks JavaScript permettent d'utiliser cette technique. Voici un exemple de requête AJAX avec JSONP en JQuery :

$.ajax({
url: http://exemple.php,
// Fonction de retour appelée
jsonp: fonctionDeRetour,
// On utilise du JSONP
dataType: jsonp,
// Exemple de données transmises
data: {
donnees: test
}
});

Une autre possibilité est l'utilisation de l'API CORS (pour Cross-Origin Resource Sharing). Cette API a été conçue en HTML5 pour permettre la communication entre plusieurs domaines. L'utilisation est différente selon le navigateur. La plupart des navigateurs utilisent l'objet XMLHttpRequest2, sauf Internet Explorer qui utilise l'objet XDomainRequest. Il faut donc effectuer des tests avant d'utiliser cet objet :

function creerRequeteCORS(methode, url)
{
var xhr = new XMLHttpRequest();
//Test pour savoir si l'objet XHR gère withCredentials, ce qui indique qu'il s'agit bien de la version 2 de XHR
if (withCredentials in xhr)
{
xhr.open(method, url, true);
}
//Sinon on teste l'objet XDomainRequest pour Internet Explorer
else if (typeof XDomainRequest != undefined)
{
xhr = new XDomainRequest();
xhr.open(method, url);
}
//Sinon le navigateur est trop ancien, il ne gère pas cette API
else
xhr = null;
return xhr;
}
var xhr = creerRequeteCORS('GET', url);
if (!xhr) {
throw new Error('CORS n\'est pas supporté par votre navigateur');
}