L'accès depuis l'origine 'https://example.com' a été bloqué même si j'ai autorisé 'https://example.com/'

Lorsqu'ils tentent d'accéder à une ressource d'origine croisée, les développeurs rencontrent souvent des problèmes liés à l'en-tête Access-Control-Allow-Origin. La clé pour résoudre ces problèmes réside dans la compréhension de la signification précise du terme « origine » dans le contexte du protocole CORS.

Le concept d'origine dans CORS

Dans CORS, une origine est une combinaison d'un schéma, d'un hôte (domaine) et d'un port. Surtout, il n’inclut pas de chemin. Par conséquent, les deux origines suivantes sont considérées comme distinctes :

• https://example.com
• https://example.com/path/to/resource

Le problème : les barres obliques finales dans les origines

Le problème dans ce cas particulier vient d'une mauvaise compréhension de la définition de l'origine. Plus précisément, la barre oblique finale dans l'origine autorisée n'est pas autorisée selon les spécifications du protocole CORS. Par conséquent, l'en-tête d'origine envoyé par le navigateur (sans la barre oblique finale) ne correspond pas à l'origine autorisée configurée sur le serveur.

Solution : Supprimer la barre oblique finale de l'origine autorisée

Pour résoudre ce problème, supprimez simplement la barre oblique finale de la valeur d'origine autorisée dans votre configuration CORS. Dans ce cas, l'origine autorisée correcte serait :

• https://googledocs-clone-sbayrak.netlify.app

Avec cette modification, l'en-tête d'origine du navigateur correspondra à l'origine autorisée et CORS sera autorisé avec succès.