Solutions pour les restrictions CORS avec Apache

Le CORS (Cross-origin resource sharing) est un standard de sécurité visant, entre autre, à prévenir l’exécution de scripts situés sur un serveur avec un nom de domaine donné via un script externe. Ce mécanisme est utilisé par la plupart des navigateurs et certaines librairies, framework, etc.

Si l’intention est louable point de vue sécurité, elle est à l’origine de pas mal de tracas quand on développe des applications en local.

Le souci, en ce qui nous concerne, est que cette restriction ne s’arrête pas seulement au nom de domaine. Elle s’étend également au port du domaine qui exécute le script. Par exemple, si vous développez une application React JS ou Angular et que vous l’exécutez sous Node JS, l’url de votre application sera normalement http://localhost:3000. Si, depuis votre application, vous souhaitez appeler un .json généré sur votre serveur local et qui se situe sur http://localhost:80, le mécanisme de sécurité se déclenchera et vous serez dans l’incapacité de charger le fichier.

La solution suivante s’applique à XAMPP mais aussi à n’importe quel autre serveur Apache.

Rendez-vous dans le fichier httpd.conf (chez moi, il est situé dans c:\xampp\apache\conf\httpd.conf).

Faites une recherche sur le mot mod_headers et vérifiez que la ligne LoadModule headers_module modules/mod_headers.so n’est pas commentée avec un #.

Ensuite saisissez les lignes suivantes dans httpd.conf :

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type, X-Token-Auth, Authorization"

Vous pouvez les mettre après la ligne contenant Listen 80 par exemple.

Redémarrez Apache, et le tour est joué !

En gros ce qu’on fait ici, c’est qu’on va autoriser tous les accès provenant de toutes les origines avec la ligne Header set Access-Control-Allow-Origin « * », on autorise également toutes les méthodes (get, post, put, delete, options) et différents type de headers (contenu genre json, autorisation de connexion via token, etc.). Si c’est l’idéal pour travailler en local, je vous recommande fortement de ne pas faire ça en production.

Pour la production, vous pourriez par exemple restreindre l’accès à un seul nom de domaine (celui où se situe votre app qui veut appeler les scripts).

Dans un fichier .htaccess situé à la racine du dossier appelé :

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://ledomainedemonapp.com"
    Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
    Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type, X-Token-Auth, Authorization"
</IfModule>

Si vous voulez récupérer du json, n’oubliez pas de mettre les headers idoines dans le script qui les génère (‘Content-type:application/json;charset=utf-8’), mais c’est une autre histoire…

Copyright image : seekpng