← Retour

🌐 HTTP & REST API

Le langage du web moderne

Le Protocole HTTP

HTTP (HyperText Transfer Protocol) est le fondement du web ! Chaque fois que tu visites un site, ton navigateur fait des requêtes HTTP. REST est un style d'architecture pour créer des APIs web propres et prévisibles. 🚀

🔤 Les Verbes HTTP (Méthodes)

GET

Lire (Read)

Récupérer des données sans les modifier.

GET /api/users
GET /api/users/123

✅ Safe, Idempotent

POST

Créer (Create)

Créer une nouvelle ressource.

POST /api/users
Body: {"name": "Alice"}

❌ Non-idempotent

PUT

Remplacer (Update)

Remplacer complètement une ressource.

PUT /api/users/123
Body: {"name": "Bob"}

✅ Idempotent

PATCH

Modifier Partiellement

Modifier seulement certains champs.

PATCH /api/users/123
Body: {"email": "new@example.com"}

✅ Idempotent

DELETE

Supprimer (Delete)

Supprimer une ressource.

DELETE /api/users/123

✅ Idempotent

💡 Idempotence - Pourquoi c'est important ?

Une requête idempotente peut être répétée sans danger. Si le réseau coupe pendant un DELETE, tu peux le renvoyer sans risque. Mais POST n'est pas idempotent : renvoyer 3 fois POST créera 3 ressources ! ⚠️

📊 Codes de Statut HTTP

2xx - Succès ✅

200 OK - Requête réussie
201 Created - Ressource créée (POST)
204 No Content - Succès sans corps (DELETE)

4xx - Erreurs Client ⚠️

400 Bad Request - Requête mal formée
401 Unauthorized - Non authentifié (login requis)
403 Forbidden - Authentifié mais pas autorisé
404 Not Found - Ressource inexistante
429 Too Many Requests - Rate limit dépassé

5xx - Erreurs Serveur 🚨

500 Internal Server Error - Erreur serveur générique
502 Bad Gateway - Serveur intermédiaire en erreur
503 Service Unavailable - Serveur surchargé

🔐 CORS - Cross-Origin Resource Sharing

Le Problème

Par défaut, un site sur domaine-a.com ne peut PAS faire d'appels API vers domaine-b.com (sécurité).

❌ Access to fetch at 'https://api.example.com' from origin 'https://monsite.com' has been blocked by CORS policy

✅ La Solution - Configurer CORS

// Backend Node.js/Express
const cors = require('cors');
app.use(cors({
    origin: 'https://monsite.com', // Origine autorisée
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    credentials: true, // Autoriser cookies
    allowedHeaders: ['Content-Type', 'Authorization']
}));
// OU autoriser tout le monde (dev seulement !)
app.use(cors({ origin: '*' }));

🏗️ REST API - Best Practices

📍 URLs Propres & Cohérentes

✅

/api/users

Nom au pluriel, minuscule

✅

/api/users/123/orders

Relations imbriquées

❌

/api/getUsers

Pas de verbe dans l'URL !

❌

/api/Users

Minuscule requis !

🎯 Versioning

Versionner ton API pour éviter de casser le code client !

Dans l'URL

/api/v1/users
/api/v2/users

Dans les headers

Accept: application/vnd.api.v1+json

📄 Pagination & Filtres

/api/users?page=2&limit=20

/api/users?role=admin&active=true

/api/users?sort=name&order=asc

🎯 Exemple Complet : CRUD Users

// 1. GET - Lire tous les users
GET /api/v1/users
Response: 200 OK
[
    { "id": 1, "name": "Alice", "email": "alice@example.com" },
    { "id": 2, "name": "Bob", "email": "bob@example.com" }
]
// 2. GET - Lire un user spécifique
GET /api/v1/users/1
Response: 200 OK
{ "id": 1, "name": "Alice", "email": "alice@example.com" }
// 3. POST - Créer un user
POST /api/v1/users
Body: { "name": "Charlie", "email": "charlie@example.com" }
Response: 201 Created
{ "id": 3, "name": "Charlie", "email": "charlie@example.com" }
// 4. PUT - Remplacer complètement
PUT /api/v1/users/1
Body: { "name": "Alice Updated", "email": "new@example.com" }
Response: 200 OK
// 5. PATCH - Modifier partiellement
PATCH /api/v1/users/1
Body: { "email": "alice.new@example.com" }
Response: 200 OK
// 6. DELETE - Supprimer
DELETE /api/v1/users/1
Response: 204 No Content

🎮 Quiz HTTP/REST

1. Pour créer une ressource, on utilise :

2. Code de statut pour "ressource créée" :

3. Quelles méthodes sont idempotentes ?

4. CORS permet de :

5. URL REST correcte :

Glisser pour continuer vers Postman & API
⬇️