Lire une erreur CORS — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 10)

Lire une erreur CORS

Dialoguer avec un serveur : fetch · niveau 2

Énoncé

Une étudiante a lancé le serveur du livre, puis ouvert sa page de test avec l'extension « Live Server » de son éditeur, à l'adresse http://127.0.0.1:5500/test.html. Son script appelle fetch("http://localhost:8000/api/livres") et la console affiche « blocked by CORS policy ». Expliquer le message. Proposer deux corrections, dont une qui ne touche pas au serveur. Ajouter un mode: "no-cors" aux options de fetch, comme le suggère la console, est-il une solution ?

Corrigé

La page a pour origine http://127.0.0.1:5500, l'API http://localhost:8000 : hôte et port diffèrent, ce sont deux origines. Le serveur ne renvoie pas l'en-tête d'autorisation (Access-Control-Allow-Origin), donc le navigateur refuse de livrer la réponse au script (la requête, elle, a bien atteint le serveur). Corrections : servir la page par le serveur du livre, en la plaçant dans le dossier du livre et en l'ouvrant par http://localhost:8000/…, et appeler fetch("/api/livres") : même origine, plus de CORS. Ou relancer le serveur avec --cors. mode: "no-cors" n'est pas une solution : il fait envoyer la requête sans exiger d'autorisation, mais la réponse obtenue est opaque (statut 0, corps illisible) ; le script ne peut rien en faire.