CORS est un mécanisme de sécurité qui bloque certaines requêtes non autorisées à votre serveur Web. Si vous tentez de lancer une requête AJAX du serveur a.com vers le serveur b.com, il se pourrait qu’une erreur vous soit retournée si le serveur b.com n’a pas configuré ses paramètres CORS pour vous permettre l’accès à cette ressource.

Tutoriel vidéo sur le CORS

Same-origin policy

En fait, par défaut, une requête AJAX ne peut être exécutée que du server a.com vers le serveur a.com. Cette règle de sécurité, on l’appelle Same-origin policy . Elle date de 1995, à cette époque, Netscape Navigator 2 était utilisé.

Netscape Navigator 2.0

Cette règle va plus loin que le simple nom du serveur, le port est aussi important. Une requête du serveur http://a.com:9000 vers http://a.com:80 vous retournera une erreur.

Exemple de message d’erreur

Erreur CORS

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. The response had HTTP status code 400.

 

 

Résultats pour la règle Same-Origin policy

Le tableau suivant présente le résultat de l’application de la règle Same-Origin policy pour l’URL

URL comparé

Résultat

Raison

http://www.exemple.com/dir/page2.html

Succès

Même protocole, domaine et port
http://www.exemple.com/dir2/other.html

Succès

Même protocole, domaine et port
http://username:password@www.exemple.com/dir2/other.html

Succès

Même protocole, domaine et port
http://www.exemple.com:81/dir/other.html

Échec

Port différent
https://www.exemple.com/dir/other.html

Échec

Protocole différent
http://en.exemple.com/dir/other.html

Échec

Domaine différent
http://exemple.com/dir/other.html

Échec

Domaine différent
http://v2.www.exemple.com/dir/other.html

Échec

Domaine différent
http://www.exemple.com:80/dir/other.html

Variable

Port explicite, dépend du navigateur

Comparativement aux autres navigateurs, IE n’inclut pas le port dans le calcul de l’origine.

La solution aux erreurs CORS

La solution est de configurer le serveur de façon appropriée. La solution pourra varier en fonction du langage serveur utilisée. Voici quelques recettes pour différents langages :

Configurer CORS avec PHP

Pour complètement retirer le mécanisme CORS, vous pouvez utiliser la fonction header() de PHP. Il n’est pas recommandé d’utiliser cette solution en production.

Configurer CORS avec Express et NodeJS

Pour débuter, installer le paquet cors :

Le code suivant vous permet de donner des accès à un serveur pour une route :

JSON with Padding – JSONP

JSONP (JSON with Padding) est une technique utilisée par les développeurs afin de contourner les restrictions cross-domain imposées par les navigateurs. JSONP permettra de récupérer des données à partir d’un serveur différent autre que le serveur par lequel la page a été servie (du serveur a.com au serveur b.com).
https://en.wikipedia.org/wiki/JSONP

Références

Facebook Comments

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.