Configurer CORS (Cross-Origin Resource Sharing) pour un site dans ServBay

Dans le développement Web moderne, les applications front-end (fonctionnant généralement sous un nom de domaine) doivent souvent accéder à des API backend ou à d’autres services (qui peuvent fonctionner sous des domaines ou ports différents). Par mesure de sécurité, la politique de même origine du navigateur bloque par défaut ces requêtes cross-origin. CORS (Cross-Origin Resource Sharing) est un mécanisme standard qui permet au serveur de déclarer quels origines sont autorisées à accéder à ses ressources afin de permettre des interactions cross-origin en toute sécurité.

Ce guide vous montre comment configurer et activer facilement CORS pour votre site via l’interface graphique de ServBay dans un environnement de développement Web local.

Qu’est-ce que CORS ?

Le Cross-Origin Resource Sharing (CORS) est un mécanisme basé sur les en-têtes HTTP qui autorise le serveur à indiquer quelles origines (domaine, protocole ou port) autres que la sienne peuvent charger des ressources. Lorsqu’une page tente de demander une ressource depuis une origine différente, le navigateur effectue une « requête HTTP cross-origin ». Par défaut, la politique de même origine du navigateur bloque de telles requêtes. CORS offre un moyen pour le serveur et le navigateur de communiquer afin de déterminer si la requête cross-origin est acceptable.

Pourquoi les développeurs doivent-ils configurer CORS ?

Lorsque vous construisez une application avec un frontend et un backend séparé (par exemple, frontend sur app.servbay.demo et API backend sur api.servbay.demo), ou quand votre front-end doit consommer une API tierce, les requêtes cross-origin sont bloquées par la politique de même origine du navigateur. Configurer CORS permet de signaler au navigateur que le serveur autorise les requêtes provenant de votre source front-end, évitant ainsi l’échec dû à la politique de sécurité.

Comprendre les principaux en-têtes HTTP de CORS

Lorsqu’un serveur répond à une requête cross-origin, il ajoute certains en-têtes HTTP Access-Control-* spécifiques. Le navigateur client, après avoir reçu ces en-têtes, décide d’accepter ou non la requête. Voici les principaux paramètres CORS configurables dans ServBay, qui correspondent à ces en-têtes HTTP :

1. Access-Control-Allow-Origin

   • Rôle : C’est l’en-tête CORS principal qui spécifie quelles origines peuvent accéder à la ressource (un ou plusieurs domaines).
   • Valeurs possibles :
     • * : Permet les requêtes de n’importe quelle origine. Important : Bien que pratique, il n’est généralement pas recommandé d’utiliser * en production car cela expose vos ressources à tout site, augmentant les risques de sécurité.
     • https://servbay.demo : Autorise les requêtes provenant uniquement de cette origine spécifique.
     • https://servbay.demo https://api.servbay.demo : Autorise plusieurs origines spécifiques, séparées par un espace.
   • Remarque : Si la requête cross-origin doit inclure des Cookies ou une authentification HTTP (c’est-à-dire avec Access-Control-Allow-Credentials: true), alors Access-Control-Allow-Origin ne doit jamais être *, et doit obligatoirement spécifier une ou plusieurs origines précises.

2. Access-Control-Allow-Methods

   • Rôle : Indique quelles méthodes HTTP sont autorisées pour les requêtes cross-origin (GET, POST, PUT, DELETE, OPTIONS, etc.).
   • Valeurs possibles : Exemple : GET, POST, PUT, DELETE, OPTIONS. Séparez les méthodes par des virgules.
   • Remarque : Pour certains « requêtes non simples » (utilisation de PUT, DELETE ou d’en-têtes personnalisés), le navigateur envoie d’abord une requête de pré-validation (preflight) de type OPTIONS. Le serveur doit répondre à cette requête en incluant l’en-tête Access-Control-Allow-Methods, indiquant les méthodes autorisées. Il est donc courant d’inclure OPTIONS dans cette liste.

3. Access-Control-Allow-Headers

   • Rôle : Spécifie quels en-têtes HTTP personnalisés peuvent être inclus dans les requêtes cross-origin.
   • Valeurs possibles : Exemple : Content-Type, Authorization, X-Requested-With. Séparez les en-têtes par des virgules.
   • Remarque : Si votre requête front-end utilise des en-têtes autres que les en-têtes dits « simples » (Accept, Accept-Language, Content-Language, ou Content-Type limité à application/x-www-form-urlencoded, multipart/form-data, ou text/plain), il faudra explicitement autoriser chaque en-tête personnalisé ici.

4. Access-Control-Allow-Credentials

   • Rôle : Indique si les requêtes cross-origin peuvent inclure des informations d’identité utilisateur comme des Cookies, des certificats SSL client ou une authentification HTTP.
   • Valeurs possibles : true ou false.
   • Remarque : Si la valeur est true, comme mentionné plus haut, la valeur de Access-Control-Allow-Origin ne doit jamais être le joker *. De plus, le code client doit également spécifier l’envoi des identifiants (par exemple, xhr.withCredentials = true ou fetch(url, { credentials: 'include' })).

Activer et configurer CORS dans ServBay

ServBay fournit une interface graphique intuitive vous permettant de gérer la configuration CORS pour chaque site indépendamment. Voici le détail étape par étape :

1. Ouvrir ServBay et accéder à la liste des sites : Lancez l’application ServBay. Dans la barre latérale gauche de l’interface principale, cliquez sur « Sites ». Vous verrez la liste de tous les sites locaux gérés dans ServBay.

2. Sélectionner le site à configurer : Trouvez dans la liste le site pour lequel vous souhaitez activer et configurer CORS. Cliquez sur son nom pour accéder à la page de configuration détaillée.

3. Accéder et activer la configuration CORS : Faites défiler la page de configuration du site vers le bas jusqu’à la section « CORS ». Par défaut, CORS est désactivé dans ServBay. Activez le commutateur à côté de cette section pour passer de « désactivé » à « activé ». Une fois activée, les options de configuration deviennent éditables.

4. Configurer Access-Control-Allow-Origin : Dans le champ « Access-Control-Allow-Origin », saisissez une ou plusieurs origines autorisées à accéder aux ressources du site. Pour plusieurs origines, séparez-les par un espace. Exemple : https://frontend.servbay.demo https://anotherapp.servbay.demo. Évitez d’utiliser * en production.

5. Configurer Access-Control-Allow-Methods : Dans le champ « Access-Control-Allow-Methods », indiquez la liste des méthodes HTTP autorisées, séparées par des virgules (ex : GET, POST, PUT, DELETE, OPTIONS). Assurez-vous d’inclure toutes les méthodes utilisées par votre application, et généralement OPTIONS pour le support de la requête de pré-validation.

6. Configurer Access-Control-Allow-Headers : Dans le champ « Access-Control-Allow-Headers », renseignez la liste des en-têtes personnalisés autorisées, séparés par des virgules (ex : Content-Type, Authorization, X-Custom-Header). Indiquez uniquement les en-têtes réellement nécessaires à votre application.

7. Configurer Access-Control-Allow-Credentials (optionnel) : Si vous avez besoin d’autoriser l’envoi de Cookies ou d’éléments d’authentification HTTP, activez le commutateur à côté de « Allow-Credentials » pour l’activer. Attention : lorsqu’il est activé, la valeur de Access-Control-Allow-Origin (étape 4) ne doit jamais être *.

8. Enregistrez la configuration : Une fois tous les paramètres CORS complétés, cliquez sur le bouton "Enregistrer" en bas à droite pour appliquer vos modifications. ServBay mettra automatiquement à jour la configuration du serveur web (Caddy ou Nginx) sans nécessiter de redémarrage manuel du service.

Exemple de configuration

L’image suivante montre un exemple de configuration CORS dans ServBay pour un site appelé « ServBay Demo Website » :

D’après la configuration illustrée ci-dessus :

• Access-Control-Allow-Origin : https://frontend.servbay.demo https://api.servbay.demo
• Access-Control-Allow-Methods : GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers : Content-Type, Authorization
• Allow-Credentials : activé (true)

Cela signifie que seules les requêtes provenant de https://frontend.servbay.demo et https://api.servbay.demo pourront accéder aux ressources du « ServBay Demo Website ». Ces requêtes peuvent utiliser les méthodes GET, POST, PUT, DELETE, OPTIONS, inclure les en-têtes Content-Type et Authorization, et peuvent transporter des identifiants (comme des cookies).

Conseils et bonnes pratiques

• Priorisez la sécurité : Utilisez Access-Control-Allow-Origin: * uniquement en développement ou test pour la commodité. En production, limitez toujours les origines autorisées aux seules nécessaires pour renforcer la sécurité.
• Requête de pré-validation : Comprendre comment fonctionnent les requêtes OPTIONS (preflight) est fondamental pour déboguer les problèmes CORS. Assurez-vous que votre serveur (via la configuration ServBay) réagit correctement à ces requêtes préalables.
• Cache du navigateur : Les politiques CORS peuvent être mises en cache par le navigateur. Si vous rencontrez des problèmes après modification de la configuration ServBay, essayez de vider le cache du navigateur ou d’utiliser le mode navigation privée pour vos tests.
• CORS côté application : Certains frameworks ou bibliothèques (comme Laravel, Express.js, Spring Boot…) offrent des réglages CORS côté application. La configuration CORS de ServBay s’applique au niveau du serveur web (Caddy/Nginx) et prend généralement le pas sur celle de l’application. Dans certains cas complexes, vérifiez et coordonnez la configuration côté serveur et application.
• Outils de diagnostic : Servez-vous des outils développeur du navigateur (généralement avec F12) et de l’onglet Réseau pour examiner les requêtes et les réponses HTTP CORS. Cela vous aidera à diagnostiquer si la configuration est effective et à comprendre la cause exacte des éventuels échecs.

FAQ (Foire Aux Questions)

Q : J’ai suivi les étapes de configuration CORS, mais mes requêtes cross-origin échouent toujours. Pourquoi ?

R : Veuillez suivre les étapes de diagnostic suivantes :

1. Vérifiez la console du navigateur et l’onglet Réseau : Les erreurs liées à CORS s’affichent dans la console, et tous les en-têtes de requête et de réponse peuvent être consultés dans l’onglet Réseau. Vérifiez que les en-têtes Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers et leurs valeurs correspondent bien à votre frontend.
2. Vérifiez les origines : L’origine indiquée dans Access-Control-Allow-Origin (protocole, domaine, port) doit correspondre exactement à celle de votre frontend faisant la requête.
3. Vérifiez les méthodes et en-têtes : Assurez-vous que Access-Control-Allow-Methods inclut toutes les méthodes HTTP utilisées, et que Access-Control-Allow-Headers autorise tous les en-têtes personnalisés employés.
4. Gestion des identifiants : Si vous utilisez des cookies ou autres identifiants, vérifiez que l’option Allow-Credentials est activée dans ServBay, et que Access-Control-Allow-Origin n’est pas *. De plus, assurez-vous que votre code client active également l’option d’envoi des identifiants (withCredentials = true côté JS).
5. Requête préliminaire (preflight) : Pour les requêtes non simples, vérifiez que le navigateur envoie bien une requête OPTIONS de pré-validation, et que le serveur répond avec tous les en-têtes CORS adéquats.
6. Configuration enregistrée dans ServBay : Vérifiez que vous avez bien cliqué sur « Enregistrer » après modification de la configuration.

Q : Puis-je définir une politique CORS globale pour tous les sites ?

R : La configuration CORS de ServBay est gérée indépendamment pour chaque site afin d’offrir plus de flexibilité et de sécurité. Il n’existe pas actuellement d’option CORS globale dans l’interface. Si vous souhaitez appliquer des politiques similaires à plusieurs sites, il faudra les configurer séparément pour chacun.

Q : Comment ServBay gère-t-il techniquement la configuration CORS ?

R : ServBay utilise en backend un serveur Web Caddy ou Nginx. Les réglages effectués via l’interface ServBay sont convertis automatiquement en directives pour Caddyfile ou dans les fichiers de configuration Nginx appropriés. ServBay gère l’application et le rechargement de ces fichiers sans intervention manuelle.

Conclusion

Grâce à l’interface intuitive de ServBay, vous pouvez facilement activer et configurer CORS pour vos sites en développement local et résoudre efficacement les problématiques d’accès cross-origin. Bien comprendre et paramétrer les en-têtes clés Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers et Access-Control-Allow-Credentials est fondamental pour assurer la sécurité et la fluidité de vos requêtes cross-origin. Suivez ce guide et ses recommandations pour optimiser votre expérience de développement Web local.