Configurer CORS (Partage de Ressources entre Origines) pour un site Web

Qu'est-ce que CORS ?

Le partage de ressources entre origines (CORS) est un mécanisme basé sur les en-têtes HTTP destiné à assouplir les restrictions des navigateurs concernant les demandes entre différentes origines. En termes simples, lorsqu'une page Web (par exemple, une page située sur example.com) souhaite demander des ressources à partir d'un domaine différent (par exemple, api.example.net), le navigateur bloque par défaut cette demande en raison de la politique de même origine. CORS permet au serveur d'ajouter des en-têtes spécifiques dans sa réponse, informant le navigateur des origines autorisées à accéder aux ressources, permettant ainsi un accès inter-.origine sécurisé.

Pourquoi utiliser CORS ?

Lorsque votre application frontale (par exemple, une SPA exécutée sur app.example.com) a besoin de récupérer des données depuis une API backend (par exemple, en cours d'exécution sur api.example.com), vous devrez probablement utiliser CORS.

Détails des paramètres CORS

Voici quelques paramètres couramment utilisés dans CORS et leur fonction :

1. Access-Control-Allow-Origin:

   • Fonction : Spécifie les origines autorisées à accéder aux ressources.
   • Valeurs :
     • * : autorise les demandes de n'importe quel domaine (non recommandé pour un environnement de production en raison de problèmes de sécurité).
     • https://example.com : autorise uniquement les demandes venant de https://example.com.
     • https://example.com https://www.example.net : autorise uniquement les demandes provenant de https://example.com et https://www.example.net.
   • Remarque importante : Lorsque la demande inclut un en-tête Authorization, Access-Control-Allow-Origin ne peut pas être défini sur *. Il doit être réglé sur un domaine spécifique, sinon la demande inter-origine échouera.

2. Access-Control-Allow-Methods:

   • Fonction : Spécifie les méthodes HTTP autorisées (comme GET, POST, PUT, DELETE).
   • Valeurs : Par exemple : GET, POST, PUT, DELETE, OPTIONS
   • Remarque importante : Si votre demande inclut des en-têtes personnalisés, ou utilise les méthodes PUT ou DELETE, vous devez déclarer ici la méthode OPTIONS. Sinon, le navigateur enverra d'abord une demande préliminaire OPTIONS. Si la réponse de cette demande préliminaire ne déclare pas la méthode OPTIONS comme autorisée, votre demande échouera.

3. Access-Control-Allow-Headers:

   • Fonction : Spécifie les en-têtes HTTP personnalisés que le client est autorisé à utiliser dans sa demande.
   • Valeurs : Par exemple : Content-Type, Authorization
   • Remarque importante : Si votre demande contient des en-têtes personnalisés, vous devez les déclarer ici comme autorisés, sinon le navigateur bloquera votre demande.

4. Access-Control-Allow-Credentials:

   • Fonction : Indique si les demandes inter-Origine sont autorisées à inclure des cookies ou des informations d'authentification HTTP.
   • Valeurs : true ou false.
   • Remarque importante : Lorsque réglé sur true, la valeur de Access-Control-Allow-Origin ne peut pas être un astérisque *.

Activer et configurer CORS dans ServBay

ServBay propose une interface conviviale pour configurer les paramètres CORS du site web, voici les étapes à suivre :

1. Sélectionner le site : Dans la barre de navigation à gauche de l'interface principale de ServBay, cliquez sur l'option "Sites". Sélectionnez le site pour lequel vous souhaitez configurer CORS dans la liste des sites.

2. Accéder à la configuration CORS : Dans l'interface de configuration du site, trouvez la section "CORS". Par défaut, CORS est désactivé sur ServBay. Vous devez l'activer manuellement en basculant le commutateur de "désactiver" à "activer".

3. Configurer Access-Control-Allow-Origin: Dans le champ Access-Control-Allow-Origin, saisissez les domaines autorisés à accéder de manière séparée par des espaces. Par exemple : https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com.

4. Configurer Access-Control-Allow-Methods: Dans le champ Access-Control-Allow-Methods, saisissez les méthodes de demande HTTP que vous souhaitez autoriser. Par exemple : GET, POST, PUT, DELETE, OPTIONS.

5. Configurer Access-Control-Allow-Headers: Dans le champ Access-Control-Allow-Headers, saisissez les en-têtes de demande que vous souhaitez autoriser. Par exemple : Content-Type, Authorization.

6. Activer Allow-Credentials (optionnel) : Si vous devez autoriser les demandes inter-Origine à inclure des cookies ou des informations d'authentification, activez le commutateur Allow-Credentials. Veuillez noter que si cette option est activée, la valeur de Access-Control-Allow-Origin ne peut pas être un astérisque *.

7. Enregistrer les paramètres : Une fois la configuration terminée, cliquez sur le bouton "Enregistrer" en bas à droite pour appliquer vos modifications.

Exemples

Selon la capture d'écran ci-dessus, la configuration CORS pour le site “ServBay Testing” est la suivante :

• Access-Control-Allow-Origin : https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com
• Access-Control-Allow-Methods : GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers : Content-Type, Authorization
• Allow-Credentials : Activé.

Cela signifie que les demandes provenant des domaines ci-dessus peuvent accéder aux ressources du site servbay.new, et peuvent utiliser les méthodes GET, POST, PUT, DELETE, OPTIONS, tout en pouvant inclure les en-têtes de demande Content-Type et Authorization ainsi que les informations de cookie.

Remarques

• Sécurité : Évitez d'utiliser l'astérisque * comme valeur de Access-Control-Allow-Origin dans un environnement de production.
• Cache : Les navigateurs peuvent mettre en cache les réponses CORS. Vous devrez peut-être vider le cache de votre navigateur après avoir modifié les paramètres CORS.
• Configuration du code : Dans certains cas, au-delà de la configuration CORS sur le serveur Web, une configuration CORS au niveau du code (Laravel) peut également être nécessaire.
• Scénarios complexes : Pour des scénarios inter-Origine plus complexes, vous devrez peut-être combiner CORS avec d'autres technologies, telles que JSONP ou serveurs proxy.

Grâce à ces étapes, vous pouvez facilement activer et configurer CORS pour votre site Web dans ServBay, garantissant que vos demandes inter-Origine peuvent se dérouler sans problème.

J'espère que ce document vous aidera à mieux comprendre et à utiliser les fonctionnalités CORS de ServBay. N'hésitez pas à poser vos questions si vous en avez.