Vous est-il déjà arrivé de rencontrer ce genre d’erreur lors d’une requête AJAX vers un fichier JSON ou XML situé sur un autre domaine ?
La Raison est le CORS (Cross Origin Requests). En résumé, le W3C a recommandé ce mécanisme afin de sécuriser les requêtes HTTP entre différents domaines. Les récents navigateurs ont alors tous adoptés ce système et parfois cela peut nous apporter un lot de problèmes.
Voici un article détaillé sur le sujet : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Internet et ses réponses (plus ou moins) pertinentes
Les réponses que l’on peut trouver sur Internet sont assez floues, beaucoup de développeurs ont apparemment rencontré ce problème et beaucoup ont de la misère à comprendre le principe. Cela signifie que l’on peut trouver toutes sortes de réponses :
- Ajouter un header à sa requête AJAX.
- Ajouter au début de son fichier PHP (* signifie tous les domaines, peut être remplacé par un domaine en particulier exemple@domaine.com) :
<?php
header('Access-Control-Allow-Origin: *');
?>
$$
- en ASP.NET :
Response.AppendHeader("Access-Control-Allow-Origin", "*");
$$
- Ajouter à son fichier HTACCESS :
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin *
</IfModule>
$$
Ajouter une extension à Google Chrome.
- Etc.
Certaines de ces réponses sont valables sous certaines conditions :
Au niveau de l’extension Chrome (téléchargeable ici : https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en ), elle est très pratique, elle permet de contourner le CORS dans le navigateur afin de pouvoir tester le bon fonctionnement de sa requête, mais on est d’accord pour dire que ça ne peut pas être une solution à long terme. Encore moins lorsque les données vont être utilisées et diffusées publiquement, on ne peut pas demander à tous les utilisateurs d’ajouter l’extension à leur navigateur.
Les permissions à ajouter en PHP , .NET, HTACCESS impliquent d’avoir accès au serveur de la source de données. Comment fait-on lorsque ce sont des données libres d’accès, mais gérées par un tiers (données météo du gouvernement en XML dans notre cas) ?
Et aussi comment fait-on lorsque la source n’a pas été configurée afin d’accepter des headers ? Et que les personnes-ressources du domaine en question, n’ont aucune idée de quoi on parle lorsqu’on essaye de leur expliquer ?
jQuery à la rescousse
Heureusement, un bout de script JQUERY peut nous permettre d’arriver à nos fins et nous sauver de précieuses minutes de cassage de tête.
Ce code (bien caché) se trouve ici : https://github.com/padolsey-archive/jquery.fn/tree/master/cross-domain-ajax
Il suffit d’ajouter le script jquery.xdomainajax.js à son document (et bien sûr de charger jQuery auparavant) et le tour est joué. Le script utilise YQL et “simule” un proxy afin de contourner la sécurité.
Références
http://ajaxian.com/archives/using-yql-as-a-proxy-for-cross-domain-ajax
