CORS: adapter a Zed (terminal integre + npx serve/py), retirer Live Server VS Code, titres neutres
This commit is contained in:
+21
-21
@@ -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.
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user