Comprendre le CORS et les requêtes Preflight
Qu’est ce que le CORS?
CORS veut dire Cross Origin Resource Sharing ou en français partage des ressources inter origines. bon dit comme ça ça veut pas dire grand chose. En gros, quand vous faites une requêtes AJAX, vous le faites depuis (en formation informatique) votre poste local localhost. Imaginons que vous vouliez faire une requête AJAX vers le site OpenWeatherMap.org, vous voyez bien que le nom de domaine est différent de localhost. Eh bien on a là un cas de requêtes AJAX Cross Origin.
Pourquoi parle t on de CORS?
Le web est un monde ouvert où on peut faire à peu près n’importe quoi. Il y a des considération de sécurité, concept très important dans un monde ouvert. Ici avec le CORS on fait la distinction entre les requêtes AJAX internes et les requêtes AJAX venants d’un autre site web. Je trouve personnellement que c’est fantastique qu’il soit possible de partager des informations entre sites web.
Les requêtes AJAX internes
Quand vous développez un front en en Javascript (Javascript pur ou ReactJS ou Angular peu importe) vous faites des requêtes AJAX locales pour tirer des informations à afficher. Vous requêtez votre serveur qui est dans le même nom de domaine que le code Javascript qui fait la requête. Dans ce cas il n’est pas de problème de CORS, tout est sur un même domaine.
Ce cas de figure, c’est la majorité des applications modernes, donc vous n’êtes pas confronté au problème de CORS.
Les requêtes externes
Mais imaginez que vous développiez une application IOS ou Android, dans ce cas vous ferez face à des problème de CORS. En effet la requête réseau ne provient pas du site web du serveur, donc ce sera considéré comme une requête CORS. Si vous ne faites rien côté serveur vous n’allez pas pouvoir servir le contenu à l’application mobile.
Le problème du CORS se règle côté serveur et non côté client.
Ayez le réflexe de regarder du côté du serveur pour résoudre le problème de CORS. Vous ne pouvez rien faire du côté du client. Nous allons regarder un exemple avec un code PHP.
Supposons que le code serveur ci-dessous se trouve sur le domaine localhost:
http://localhost/index.php
echo json_encode(['message' => 'Bonjour']);
Voici le code côté client en javascript : http://localhost/caller.html
fetch('http://localhost/index.php')
.then(response => response.json())
.then( data => console.log(data))
Le fichier dans lequel réside le Javascript est dans le domaine localhost, donc pas de problème de CORS. Mais regardons le cas suivant
http://localhost/index.php
echo json_encode(['message' => 'Bonjour']);
Voici le code côté client en javascript : http://127.0.0.1/caller.html
fetch('http://localhost/index.php')
.then(response => response.json())
.then( data => console.log(data))
Cette fois ci nous avons u problème de CORS en effet localhost n’est pas pareil que 127.0.0.1 bien que d’un point de vu résolution de chemin ce soit la même chose !
Mise en place du CORS en PHP
Comme la solution est du côté du serveur, nous allons ajouter à la réponse du serveur des en-têtes pour permettre au CORS de fonctionner.
header('Content-Type: application/json');
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400'); // cache for 1 day
echo json_encode(['message' => 'Bonjour']);
Ce qui est important c’est le Access-Control-Allow-Origin, qui va permettre de faire du CORS. Ici on a mis un astérisque qui désigne tous les domaines, mais on peut restreindre à un domaine en particulier.
Les requêtes PREFLIGHT
Maintenant que vous savez faire du CORS affinons le sujet avec les requêtes Preflight. Elles sont envoyées par le navigateur pour “sonder” le serveur dans le cas de requêtes CORS. Le verbe HTTP est OPTIONS. Cette requête est automatiquement envoyée par le serveur, le développeurs front end n’a pas à s’en soucier.
Le serveur quand il reçoit cette requêtes OPTIONS doit répondre avec Access-Control-Allow-Method
header( 'Access-Control-Allow-Methods: GET, POST, OPTIONS' );
