CORS: adapter a Zed (terminal integre + npx serve/py), retirer Live Server VS Code, titres neutres

This commit is contained in:
2026-06-23 11:07:35 +02:00
parent 22a1178bd7
commit 472498c56d
+21 -21
View File
@@ -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.
---