diff --git a/CORRECTION_cors.md b/CORRECTION_cors.md index 445d650..8ae2d5c 100644 --- a/CORRECTION_cors.md +++ b/CORRECTION_cors.md @@ -12,6 +12,43 @@ Tu ouvres `services.html` en **double-cliquant** dessus → l'adresse commence p --- +## 🆚 `file://` vs `http://localhost:8000` : c'est quoi la différence ? + +C'est **deux façons complètement différentes** d'ouvrir la même page. Regarde toujours ta **barre d'adresse**, elle te dit dans quel mode tu es. + +### Mode 1 — Double-clic = `file://` +``` +file:///Users/.../stagiaire/pages/services.html +``` +Là, **aucun serveur n'est impliqué**. Le navigateur va juste **lire le fichier directement sur ton disque dur**, comme quand tu ouvres une photo ou un PDF. C'est isolé : il n'y a ni « site », ni adresse web, ni « origine ». + +➡️ Et c'est précisément le problème : `fetch` sert à **demander des fichiers à un serveur**. Comme il n'y a **pas de serveur** ici (juste un fichier posé sur ton disque), le navigateur bloque par sécurité → l'erreur « CORS policy ». Pareil, plus tard, pour les *modules* JS ou d'autres fonctionnalités : elles ont besoin d'un vrai `http://`. + +### Mode 2 — `python3 -m http.server` = `http://localhost:8000` +``` +http://localhost:8000/pages/services.html +``` +Là, tu as lancé un **petit programme serveur** qui « publie » ton dossier et **répond aux demandes**, exactement comme le ferait un vrai site web — sauf qu'il tourne **sur ta propre machine**. Le navigateur ne lit plus le disque en direct : il **demande** la page au serveur (« donne-moi `/pages/services.html` »), et le serveur la **renvoie**. + +➡️ Du coup il y a une vraie **adresse web** (`localhost:8000`), donc une vraie « origine ». `fetch` peut alors demander `css/vehicules.json` **au même serveur** → autorisé, ça marche. C'est aussi pour ça que tu vois apparaître les lignes `"GET /..." 200` dans le terminal : ce sont les demandes que ton navigateur fait au serveur. + +### Décoder l'adresse `http://localhost:8000` +- **`localhost`** = « cette machine-ci » (ton ordi). Le serveur ne sort pas sur Internet, il reste chez toi. +- **`8000`** = le **port**, une sorte de « numéro de porte » où ton serveur écoute. C'est le `8000` que tu as écrit dans la commande ; tu pourrais en mettre un autre (3000, 5500…), il faudrait juste l'utiliser dans l'adresse. + +### En une image +| | Double-clic (`file://`) | Serveur (`http://localhost:8000`) | +|---|---|---| +| Ce que fait le navigateur | lit un fichier sur le disque | **demande** la page à un serveur | +| Y a-t-il un serveur ? | non | oui (lancé par toi) | +| Adresse / origine | aucune (juste un chemin) | `localhost:8000` | +| `fetch` autorisé ? | ❌ non (erreur CORS) | ✅ oui | +| Ressemble à… | ouvrir un PDF depuis un dossier | visiter un vrai site web (mais chez toi) | + +> 💡 **L'image à garder :** `file://` = tu lis un papier posé sur ton bureau. `http://localhost:8000` = tu as monté un mini-site web sur ton ordi et tu le visites comme n'importe quel site. Les vraies fonctionnalités du web (dont `fetch`) ont besoin de la **deuxième** situation. + +--- + ## La solution (1 commande) Dans un terminal, place-toi à la **racine du projet** et lance :