Introduction
Les erreurs Cross-Origin Resource Sharing (CORS) surviennent lorsque des ressources demandées sur un serveur différent de l’origine sont bloquées par la politique de même origine (same-origin policy). Cette politique de sécurité web empêche certaines requêtes HTTP provenant d’un autre domaine d’accéder aux ressources de votre site web, sauf si des autorisations explicites sont définies.
Dans ce document, nous expliquons comment configurer Drupal pour gérer les paramètres CORS. En modifiant le fichier services.yml, vous pourrez activer la configuration CORS, spécifier les en-têtes autorisés, les méthodes HTTP permises, et les origines acceptées. Suivre ces étapes permettra une interaction fluide et sécurisée entre votre backend Drupal et votre frontend, assurant ainsi une expérience utilisateur optimale.
Prérequis
Avant de commencer la configuration, vous devez disposer d’un environnement Drupal fonctionnel. Pour des instructions détaillées sur l’installation de Drupal, veuillez vous référer à Comment installer Drupal dans un conteneur docker
Use case
Dans le cadre d’un site web découplé, où le backend est géré avec Drupal et le frontend avec un autre framework, il est essentiel de configurer correctement CORS pour permettre la communication entre ces deux parties. Lorsque Drupal est utilisé comme backend headless, il doit être configuré pour permettre à une application web front-end de consommer ses APIs.
Par exemple, si l’application front-end a un nom de domaine front.example.com, Drupal doit autoriser ce domaine à consommer les APIs. Cela permet aux requêtes envoyées par le client front-end d’être bien exécutées et traitées par le serveur Drupal. Sans cette configuration, les requêtes cross-origin seraient bloquées, empêchant l’application front-end d’interagir correctement avec le backend Drupal.
Configuration du fichier services.yml
La première étape consiste à copier le fichier default.services.yml du repertoire web/sites/default dans services.yml. Cela nous permet de modifier les configurations nécessaires sans affecter le fichier de service par défaut.
cd web/sites/default
cp default.services.yml services.ymlActiver la Configuration CORS
Dans le fichier services.yml, nous devons changer la valeur de enabled: false à enabled: true sous la section cors.config. Cette modification permet d’activer la configuration CORS.
cors.config:
enabled: trueModifier les En-têtes Autorisés
Ensuite, nous devons changer allowedHeaders: [] en incluant les en-têtes nécessaires pour autoriser les requêtes. Les en-têtes suivants doivent être ajoutés : 'x-csrf-token','authorization','content-type','accept','origin','x-requested-with','access-control-allow-origin','x-allowed-header'.
allowedHeaders: ['x-csrf-token','authorization','content-type','accept','origin','x-requested-with','access-control-allow-origin','x-allowed-header']Modifier les Méthodes Autorisées
De plus, nous devons changer allowedMethods: [] pour inclure toutes les méthodes nécessaires. Par exemple, nous pouvons autoriser toutes les méthodes en utilisant ['*'].
allowedMethods: ['*']Modifier les Origines Autorisées
De même, nous devons changer allowedOrigins: [] pour inclure toutes les origines nécessaires. Pour un environnement de développement, nous pouvons utiliser ['*'] pour autoriser toutes les origines.
allowedOrigins: ['*']Cependant, cette configuration est trop permissive pour un environnement de production. Il est préférable de spécifier les domaines autorisés, par exemple :
allowedOrigins: ['https://front.example.com']Cela assure que seules les applications spécifiées peuvent interroger l’API, renforçant ainsi la sécurité en production.
Enregistrer le Fichier
Après avoir effectué toutes les modifications nécessaires, nous enregistrons le fichier services.yml.
cors.config:
enabled: true
# Specify allowed headers, like 'x-allowed-header'.
allowedHeaders: ['x-csrf-token', 'authorization', 'content-type', 'accept', 'origin', 'x-requested-with', 'access-control-allow -origin','x-allowed-header','*']
# Specify allowed request methods, specify ['*'] to allow all possible ones.
allowedMethods: ['*']
# Configure requests allowed from specific origins. Do not include trailing
# slashes with URLs.
allowedOrigins: ['*']
# Configure requests allowed from origins, matching against regex patterns.
allowedOriginsPatterns: []
# Sets the Access-Control-Expose-Headers header.
exposedHeaders: false
# Sets the Access-Control-Max-Age header.
maxAge: false
# Sets the Access-Control-Allow-Credentials header.
supportsCredentials: falseVider le Cache de Drupal
La dernière étape consiste à vider le cache de Drupal pour que les modifications soient prises en compte.
drush crConclusion
En suivant ces étapes, vous avez configuré Drupal pour gérer les CORS en autorisant les en-têtes, méthodes et origines nécessaires. Cette configuration permet aux requêtes provenant de différents domaines d’interagir sans être bloquées par la politique same-origin, assurant ainsi une meilleure communication entre les ressources web.
Développeuse fullstack spécialisée en Systèmes d'Information Répartis , diplômée de la section informatique de la Faculté des Sciences et Techniques (FST) de l'UCAD. Je relève avec passion des défis complexes, avec une forte capacité d'adaptation et un engagement pour la collaboration en équipe. Toujours avide d'apprendre, je vise à créer un impact positif et à promouvoir l'excellence organisationnelle dans chaque projet.
