Ajouter des en-têtes CORS de réponse dans un seul onglet

Votre page, par exemple sur http://localhost:3000, appelle une API d’un autre domaine, et le navigateur bloque la réponse parce qu’il lui manque les en-têtes CORS. Le temps de vos tests, vous voulez ajouter ces en-têtes dans un seul onglet, sans toucher au serveur.

Étapes

1. Installez Wirelet, puis ouvrez votre page dans un onglet, par exemple http://localhost:3000.
2. Ouvrez Wirelet : cliquez sur son icône dans la barre d’outils, ou appuyez sur Alt+Maj+Y (Contrôle+Maj+Y sur Mac). Choisissez « Nouveau profil ».
3. Sous « Sites », choisissez « Seulement ces sites » et ajoutez l’hôte de l’API, par exemple api.example.com.
4. Choisissez « Nouvel en-tête ». Dans « S’applique à », choisissez « Réponse », gardez « Remplacer », et tapez le nom Access-Control-Allow-Origin avec l’origine de votre page comme valeur : http://localhost:3000.
5. Si vos requêtes envoient un en-tête Authorization ou des en-têtes à vous, ajoutez un en-tête de réponse Access-Control-Allow-Headers qui les nomme, par exemple Authorization, Content-Type. Pour des méthodes comme PUT ou DELETE, ajoutez Access-Control-Allow-Methods. Si elles envoient des cookies, ajoutez Access-Control-Allow-Credentials avec la valeur true.
6. Cochez « Cet onglet seulement ».
7. Choisissez « Terminé », puis activez le profil pendant que cet onglet est l’onglet actif. Votre navigateur demande l’accès au site de l’API : autorisez-le.
8. Le site de votre page a aussi besoin d’un accès. Ouvrir Wirelet depuis cet onglet le donne tant que l’onglet reste sur ce site ; pour le garder, choisissez « Autoriser ce site » quand Wirelet le propose.
9. Rechargez l’onglet.

Avec des cookies, Access-Control-Allow-Origin doit être l’origine exacte de votre page : le navigateur refuse *.

Ce que cela ne règle pas

Un preflight refusé par le serveur

Avant certaines requêtes, par exemple une requête avec un en-tête Authorization, le navigateur envoie une requête OPTIONS. Si le serveur y répond par un statut d’erreur, comme 401, 404 ou 405, la requête échoue quels que soient les en-têtes : Wirelet modifie les en-têtes, pas les statuts. Dans nos essais sous Chromium 141 et 153, un preflight qui répond 204 passe une fois les en-têtes ajoutés ; un preflight qui répond 405, non.

Access-Control-Allow-Headers: * et Authorization

La norme Fetch exclut Authorization du joker. Chrome et Edge l’acceptent encore pour l’instant, mais les outils de développement le signalent comme obsolète (panneau Issues), et d’autres navigateurs le refusent : nommez Authorization dans la liste.

L’accès aux sites

Votre navigateur n’applique les en-têtes à une requête d’une page que si Wirelet a accès au site de l’API et au site de la page. Quand l’un manque, le profil affiche « Bloqué », ou rien ne change.

Les réponses en cache

Une réponse servie par le cache du service worker d’une page n’atteint jamais le réseau : aucun en-tête ne peut changer. Rechargez en ignorant le cache.

Votre navigateur seulement

Le serveur et tous les autres gardent sa propre réponse CORS : configurez le serveur avant de mettre en ligne.