CORS errors

Cross-Origin Resource Sharing (CORS) est une norme qui permet à un serveur d'assouplir la politique de même origine.

Celle-ci est utilisée pour autoriser explicitement certaines requêtes provenant d'autres sources tout en en rejetant d'autres. Par exemple, si un site offre un service intégrable, il peut être nécessaire d'assouplir certaines restrictions. La configuration d'une telle configuration CORS n'est pas nécessairement facile et peut présenter certains défis. Dans ces pages, nous examinerons quelques messages d'erreur CORS courants et comment les résoudre.

Si la configuration CORS n'est pas correctement effectuée, la console du navigateur affichera une erreur du type "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite" ("Requête Cross-Origin bloquée : La politique de même origine interdit la lecture de la ressource distante à $somesite" en français) indiquant que la demande a été bloquée en raison d'une violation des règles de sécurité de CORS. Cependant, ce n'est pas nécessairement une erreur de configuration. Il est possible que la demande soit en fait intentionnellement refusée par l'application web de l'utilisateur et le service externe distant. Toutefois, si le terminal est destiné à être disponible, un certain débogage est nécessaire pour y parvenir.

Identifier le problème

Pour saisir la cause de l'erreur, il faut préalablement découvrir la requête fautive, ainsi que la configuration erronée. Ces étapes peuvent être utiles au processus:

1. Rendez-vous sur le site défaillant et ouvrez les Developer Tools.
2. Essayez de reproduir la requête qui échoue et vérifiez la console pour trouver les messages de violation CORS, ce qui tournerait autours de:

Le text de l'erreur sera probablement similaire à:

Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at https://some-url-here. (Reason:
additional information here).

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.

• Reason: CORS disabled
• Reason: CORS request did not succeed
• Reason: CORS header ‘Origin’ cannot be added
• Reason: CORS request external redirect not allowed
• Reason: CORS request not http
• Reason: CORS header ‘Access-Control-Allow-Origin’ missing
• Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘xyz’
• Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’
• Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’
• Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’
• Reason: CORS preflight channel did not succeed
• Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Methods’
• Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’
• Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel
• Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed

Voir aussi

• Glossaire: CORS
• CORS introduction
• Server-side CORS settings
• CORS enabled image
• CORS settings attributes
• https://www.test-cors.org – une page pour tester les requêtes CORS