Passer au contenu principal

Comprendre et résoudre les erreurs de CORS

Access-Control-Allow-Origin

L'en-tête de réponse Access-Control-Allow-Origin permet de spécifier quelles origines sont autorisées à accéder aux ressources. Il peut prendre plusieurs valeurs :

  • * : Autorise toutes les origines.
  • https://exemple.fr : Autorise uniquement le domaine spécifié à accéder aux ressources.

Si vous devez autoriser plusieurs domaines, vous ne pouvez pas simplement les lister dans un seul en-tête. Dans ce cas, il est recommandé de vérifier l’origine de chaque requête. Si l’origine est autorisée, définissez-la dynamiquement dans l’en-tête Access-Control-Allow-Origin avant d'envoyer la réponse.

$allowedOrigins = ['https://exemple.fr', 'https://autre-exemple.fr'];

if (isset($_SERVER['HTTP_ORIGIN']) && in_array($_SERVER['HTTP_ORIGIN'], $allowedOrigins, true)) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
}

Access-Control-Allow-Headers

L'en-tête de réponse Access-Control-Allow-Origin suffit pour les requêtes simples. Une requête est considérée comme simple si elle répond à certains critères :

  • La méthode est GET, POST ou HEAD.
  • Les en-têtes paramétrables sont limités à Accept, Accept-Language, Content-Language et Content-Type.
  • Le Content-Type est limité aux valeurs suivantes : application/x-www-form-urlencoded, multipart/form-data ou text/plain.

Par exemple, lorsque les données sont envoyées au format JSON, ce qui entraîne l'utilisation de Content-Type: application/json, cela ne constitue plus une requête simple. Le navigateur effectuera alors une requête préliminaire (preflight request) de type OPTIONS pour vérifier si le serveur accepte les requêtes avec ces en-têtes avant d’envoyer la requête principale. Cela peut générer des erreurs CORS comme :

Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

Dans ce cas, vous devez ajouter un en-tête de réponse Access-Control-Allow-Headers pour spécifier les en-têtes autorisés lors de l’envoi de la requête principale :

header("Access-Control-Allow-Headers: Accept, Content-Type");

Access-Control-Allow-Methods

De même, lors d’une requête préliminaire, vous pouvez spécifier une ou plusieurs méthodes autorisées lors de l’accès à une ressource :

header("Access-Control-Allow-Methods: GET, POST");

Si vous souhaitez partager des cookies ou des informations d'authentification entre deux domaines via fetch, XMLHttpRequest ou EventSource, vous devez définir l'en-tête de réponse Access-Control-Allow-Credentials à true. Cela indique au navigateur que le serveur autorise l'inclusion de ces informations dans les requêtes.

Retour en haut