From 472498c56db93f8c4c656c0e4ccd71debae2c66b Mon Sep 17 00:00:00 2001 From: matthieureynier Date: Tue, 23 Jun 2026 11:07:35 +0200 Subject: [PATCH] CORS: adapter a Zed (terminal integre + npx serve/py), retirer Live Server VS Code, titres neutres --- CORRECTION_cors.md | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/CORRECTION_cors.md b/CORRECTION_cors.md index 4ed37bf..ce10cc1 100644 --- a/CORRECTION_cors.md +++ b/CORRECTION_cors.md @@ -24,7 +24,7 @@ Là, **aucun serveur n'est impliqué**. Le navigateur va juste **lire le fichier ➡️ 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` +### Mode 2 — un mini-serveur lancé par toi = `http://localhost:8000` ``` http://localhost:8000/pages/services.html ``` @@ -49,33 +49,33 @@ Là, tu as lancé un **petit programme serveur** qui « publie » ton dossier et --- -## La solution — lancer un mini-serveur +## La solution — lancer un mini-serveur (Windows + Zed) -Le but est toujours le même : ouvrir la page via `http://localhost:...` au lieu de `file://`. Sur **Windows**, et sans Python, voici les options, de la plus simple à la plus « manuelle ». +Le but est toujours le même : ouvrir la page via `http://localhost:...` au lieu de `file://`. -### ✅ Option recommandée (Windows, le plus simple) : « Live Server » dans VS Code -1. Dans VS Code, ouvre **Extensions** (l'icône carrés à gauche, ou `Ctrl+Shift+X`). -2. Cherche **« Live Server »** (de Ritwick Dey) et installe-la. -3. Ouvre `services.html`, **clic droit dans le fichier → « Open with Live Server »** (ou le bouton **Go Live** en bas à droite). -4. Ta page s'ouvre toute seule sur une adresse comme `http://127.0.0.1:5500/pages/services.html` → c'est du `http://`, `fetch` marche. 🎉 +Zed n'a pas de bouton « Live Server » comme VS Code, **mais il a un terminal intégré** : ouvre-le avec `` Ctrl + ` `` (ou menu *Terminal*). Place-toi à la **racine du projet** dedans, et lance **une** des commandes ci-dessous. -> `127.0.0.1`, c'est pareil que `localhost` (ta machine) ; `5500` est juste le port choisi par Live Server. - -### Option B — si tu as Python (même sur Windows) -Sur Windows, la commande s'écrit souvent `python` (sans le `3`) ou `py` : -```powershell -py -m http.server 8000 -``` -(ou `python -m http.server 8000`). Puis ouvre `http://localhost:8000/pages/services.html`. -Pour tester si tu l'as : tape `py --version` dans le terminal. Pour arrêter le serveur : `Ctrl + C`. - -### Option C — si tu as Node.js +### ✅ Option A — avec Node.js (recommandée si tu l'as) ```powershell npx serve ``` -Il t'affiche l'adresse à ouvrir (souvent `http://localhost:3000`). +`npx` télécharge un mini-serveur à la volée (rien à installer en plus). Il affiche l'adresse à ouvrir, du genre `http://localhost:3000`. Pour vérifier que tu as Node : `node --version`. -> 💡 **À retenir :** « CORS policy » sur un `fetch` de fichier local = tu as ouvert la page en `file://`. La réponse est toujours : **passe par un petit serveur** pour avoir une adresse `http://`. Sur Windows, le plus simple est **Live Server dans VS Code** — pas besoin de Python. (Et si tu utilises un IDE JetBrains comme WebStorm, il a aussi un serveur intégré : « Open in Browser » donne déjà une adresse `http://localhost:...`.) +### Option B — avec Python +Sur Windows, la commande s'écrit `py` (ou `python`), pas `python3` : +```powershell +py -m http.server 8000 +``` +Puis ouvre `http://localhost:8000/pages/services.html`. Pour vérifier que tu l'as : `py --version`. + +### Tu n'as ni Node ni Python ? +Installe-en **un** (c'est utile pour la suite de toute façon) : +- **Node.js** → https://nodejs.org (version « LTS »), puis reviens à l'option A. +- ou **Python** → https://www.python.org/downloads/ — ⚠️ à l'installation, **coche « Add python.exe to PATH »**, puis option B. + +> Dans tous les cas : pour **arrêter** le serveur, `Ctrl + C` dans le terminal. Et ouvre bien l'adresse `http://localhost:...`, **pas** le fichier en double-clic. + +> 💡 **À retenir :** « CORS policy » sur un `fetch` de fichier local = tu as ouvert la page en `file://`. La réponse est toujours : **passe par un petit serveur** pour avoir une adresse `http://`. Le serveur se lance depuis un terminal (celui de Zed fait l'affaire) ; n'importe lequel des outils ci-dessus convient. ---