Requête cross domain avec JSONP

16 Mar 2016

Si au cours de l’un de vos projets vous devez échanger des informations depuis des sites externes, vous avez sans aucun doute sûrement rencontré l’erreur Acces-Control-Allow-Origin. Nous connaissons  tous la règle, il est interdit d’échanger des informations Wikipédia ~ XHR via d’autres domaines que celui sur lequel le script est exécuté.

Pour remédier à cela il exist bien des façons, mais je vais me concentrer sur la technique du Wikipédia ~ JSONP, pour JSON Padding. Il s’agit en faite d’encapsuler du JSON, en effet, au lieu de demander à récupérer du JSON, notre script va demander à charger un script (les scripts ne sont pas sujet à cet erreur) qui va appeler une fonction avec comme paramètre le JSON que vous chercher à récupérer.

Il faut tout d’abord encapsuler les données dans une fonction de callback, dont on choisit le nom. Ce string sera retournée via une URL en HTTP.

Finalement on se sert du dernier argument de l’URL pour y mettre le nom de la fonction de retour. jQuery va alors remplacer le point d’interrogation final par cette fonction de callback à exécuter côté client.

Il suffit ensuite, dans la page sur laquelle on souhaite récupérer les données d’appeler l’URL avec un GetJSON et de créer la fonction callback qui est censée recevoir en paramètres les données au format JSON

Enjoy!