Erreurs CORS

Identifier un problème CORS

Pour comprendre la cause sous-jacente du problème de configuration CORS, il faut identifier quelle requête est en faute et pourquoi. Ces étapes peuvent vous aider à le faire :

1. Naviguez vers le site web ou l'application web en question et ouvrez les Outils de développement ^(angl.).
2. Essayez ensuite de reproduire la transaction échouée et vérifiez la console pour voir si un message d'erreur de violation CORS apparaît. Cela ressemble probablement à ceci :

Le texte du message d'erreur est similaire à ce qui suit :

Demande inter-origines bloquée : la politique de même origine interdit
l'accès à la ressource distante située à l'adresse https://une-url-ici.
(Raison : plus d'informations ici).

Considérations côté client

La plupart des erreurs CORS ne peuvent être résolues que côté serveur, car c'est le serveur qui contrôle si l'accès inter-origines est autorisé. Cependant, il existe certaines actions que vous pouvez entreprendre côté client :

Éviter de déclencher une requête préliminaire

Les navigateurs envoient une requête préliminaire avant la requête réelle lorsque certaines conditions sont remplies (en-têtes personnalisés, méthodes autres que GET/HEAD/POST, ou types de contenu non simples). Si le serveur ne gère pas les requêtes préliminaires, vous pouvez restructurer votre requête pour qu'elle soit considérée comme une requête simple :

• N'utilisez que les méthodes GET, HEAD ou POST.
• N'utilisez que les en-têtes de requête sécurisés CORS (comme Accept, Content-Language ou Content-Type).
• N'utilisez que application/x-www-form-urlencoded, multipart/form-data ou text/plain pour Content-Type.

Les requêtes simples contournent entièrement l'étape de pré-validation, ce qui évite une catégorie d'erreurs CORS liées à la gestion des requêtes préliminaires.

Utiliser le mode no-cors pour les réponses opaques

Si vous n'avez pas besoin de lire le corps ou les en-têtes de la réponse - par exemple, lors de l'envoi de balises d'analyse ou du chargement de ressources dans un cache avec un service worker - vous pouvez définir le mode sur "no-cors" dans un appel fetch() :

fetch("https://api.example.com/log", {
  method: "POST",
  mode: "no-cors",
  body: data,
});

La réponse est opaque : son statut est 0, ses en-têtes sont vides et son corps n'est pas lisible par JavaScript. C'est une caractéristique inhérente à la fonctionnalité no-cors qui désactive la vérification CORS, mais en contrepartie, vous perdez tout accès au contenu de la réponse.

Utiliser un serveur mandataire

Si vous ne contrôlez pas le serveur distant et que celui-ci ne définit pas d'en-têtes CORS, vous pouvez acheminer les requêtes par l'intermédiaire d'un serveur que vous contrôlez. Votre serveur récupère la ressource en votre nom et la retourne avec les en-têtes CORS appropriés. Cette approche ajoute de la latence et introduit une dépendance vis-à-vis de votre mandataire, mais elle fonctionne lorsque les autres options ne sont pas disponibles.

Messages d'erreur CORS

Firefox affiche les erreurs dans la console lors d'échec de requête CORS. Ce message contient entre autres un champ « reason » donnant un meilleur contexte quant à la raison de l'échec de la requête. Ces messages sont listés ci-dessous; chacun de ces liens pointent vers un article plus spécifique et contenant des pistes de solution.

• Raison : CORS désactivé
• Raison : La requête CORS a échoué
• Raison : L'en-tête CORS Origin ne peut pas être ajouté
• Raison : Redirection externe de la requête CORS non autorisée
• Raison : La requête CORS n'utilise pas HTTP
• Raison : L'en-tête CORS Access-Control-Allow-Origin est manquant
• Raison : L'en-tête CORS Access-Control-Allow-Origin ne correspond pas à xyz
• Raison : Les informations d'identification ne sont pas prises en charge si l'en-tête CORS Access-Control-Allow-Origin est *
• Raison : Méthode introuvable dans l'en-tête CORS Access-Control-Allow-Methods
• Raison : true attendu dans l'en-tête CORS Access-Control-Allow-Credentials
• Raison : Échec du canal de pré-validation CORS
• Raison : Jeton xyz invalide dans l'en-tête CORS Access-Control-Allow-Methods
• Raison : Jeton xyz invalide dans l'en-tête CORS Access-Control-Allow-Headers
• Raison : Jeton xyz manquant dans l'en-tête CORS Access-Control-Allow-Headers du canal de pré-validation CORS
• Raison : Plusieurs en-têtes CORS Access-Control-Allow-Origin ne sont pas autorisés

Voir aussi

• L'entrée du glossaire CORS
• Introduction au CORS
• Paramètres CORS côté serveur
• Image compatible CORS
• Attributs des paramètres CORS