chrome · JavaScript
Le message
Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Ce que cela veut dire
La requête a atteint le serveur et une réponse est revenue, mais cette réponse ne portait aucun en-tête autorisant cette origine : le navigateur a donc refusé de la remettre à votre JavaScript. Seuls les navigateurs appliquent cette règle, d'où le fait que la même URL fonctionne depuis curl — on croit le serveur en bon état et le navigateur seul fautif. Le correctif est toujours côté serveur : ajouter Access-Control-Allow-Origin: http://localhost:3000 à la réponse. Le front n'y peut rien, et si le serveur n'est pas le vôtre, passer l'appel par le vôtre est la seule voie. Allow-Origin: * ne vaut pas pour les requêtes qui envoient des cookies ; celles-ci exigent l'origine exacte et Allow-Credentials.
Le correctif
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data- Émis par
- chrome
- JavaScript
- 15
Les erreurs du navigateur et de Node disent d'ordinaire ce qui a cassé et non pourquoi la valeur est devenue telle — vous avez lu undefined, ce n'était pas une fonction, ce n'était pas du JSON — l'endroit à corriger se trouve donc en amont de la ligne qui a levé l'erreur, et faire taire cette seule ligne avec ?. et des valeurs par défaut fait revenir le même problème plus loin, sous une forme plus difficile à reconnaître.
Lire un message d’erreur
- Lisez à partir de la première ligne. Plus on descend, plus il s’agit des entrailles de l’outil ; la cause est généralement en haut.
- S’il y a un fichier et un numéro de ligne, commencez là — pas la première image de la pile, mais la ligne la plus haute qui nomme un fichier de vous.
- Cherchez le message tel quel, mais retirez d’abord vos chemins et vos noms de variables : c’est cela qui empêche la correspondance.
- La même situation se formule autrement selon la version de l’outil. Si les résultats sonnent faux, ajoutez le numéro de version.
- Avant de coller un correctif, vérifiez ce qu’il jette. Certains sont irréversibles.
Questions fréquentes
Q. Que veut dire « Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. » ?
La requête a atteint le serveur et une réponse est revenue, mais cette réponse ne portait aucun en-tête autorisant cette origine : le navigateur a donc refusé de la remettre à votre JavaScript. Seuls les navigateurs appliquent cette règle, d'où le fait que la même URL fonctionne depuis curl — on croit le serveur en bon état et le navigateur seul fautif. Le correctif est toujours côté serveur : ajouter Access-Control-Allow-Origin: http://localhost:3000 à la réponse. Le front n'y peut rien, et si le serveur n'est pas le vôtre, passer l'appel par le vôtre est la seule voie. Allow-Origin: * ne vaut pas pour les requêtes qui envoient des cookies ; celles-ci exigent l'origine exacte et Allow-Credentials.
Q. Comment le corriger ?
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data — avant de le lancer, vérifiez plus haut ce que cette commande jette.
Q. Quel outil émet cela ?
chrome. Cela relève de JavaScript, et le message compte 23 mots.