Les erreurs Cross-Origin Resource Sharing (CORS) surviennent lorsque les 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. Dans ce document, nous expliquons comment nous avons configuré Drupal pour gérer les erreurs CORS.

Copier le Fichier default.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.

cp default.services.yml services.yml

Activer 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: true

Modifier 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 autoriser toutes les origines, nous utilisons ['*'].

allowedOrigins: ['*']

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: false

Vider le Cache de Drupal

La dernière étape consiste à vider le cache de Drupal pour que les modifications soient prises en compte.

drush cr

En suivant ces étapes, nous avons configuré Drupal pour gérer les erreurs CORS en permettant les en-têtes, méthodes et origines nécessaires. Cette configuration assure que les requêtes provenant de différents domaines sont autorisées, éliminant ainsi les erreurs CORS et permettant une meilleure interaction entre les ressources web.