Avancé

CORS & Caching HTTP

Deux mécanismes essentiels à comprendre lors de la conception d'une API : la politique de sécurité CORS et la mise en cache HTTP Caching.

CORS - Cross-Origin Resource Sharing

Le problème

Par défaut, les navigateurs bloquent les requêtes HTTP entre domaines différents. C'est une mesure de sécurité pour protéger les utilisateurs.

Deux ports = deux origines

Attention : deux ports différents sur localhost comptent comme des domaines différents. Si votre frontend tourne sur http://localhost:3000 et votre API sur http://localhost:5000, vous êtes en situation de cross-origin.

Origine = protocole + domaine + port

http://localhost:3000  ≠  http://localhost:5000  (ports différents)
http://monsite.com     ≠  https://monsite.com    (protocoles différents)
https://api.monsite.com ≠ https://monsite.com    (sous-domaines différents)

Comment ça fonctionne ?

Lorsqu'une requête cross-origin est détectée, le navigateur effectue parfois une requête préliminaire (preflight) en OPTIONS pour demander au serveur s'il autorise la requête.

Le serveur répond avec des headers CORS :

Access-Control-Allow-Origin: https://monsite.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

Configuration avec Flask

python

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)

# Autoriser toutes les origines (développement uniquement !)
CORS(app)

# Ou restreindre à des origines spécifiques (production)
CORS(app, origins=[
    "https://monsite.com",
    "https://www.monsite.com"
])

Ne jamais utiliser * en production

Autoriser toutes les origines (Access-Control-Allow-Origin: *) est pratique en développement, mais représente un risque de sécurité en production. Listez explicitement les origines autorisées.

Erreurs CORS fréquentes

Les erreurs CORS sont une source majeure de frustration lors du développement. Voici les causes les plus courantes :

Symptôme	Cause probable
`No 'Access-Control-Allow-Origin' header`	CORS non configuré sur le serveur
`Method not allowed by Access-Control-Allow-Methods`	Méthode HTTP non autorisée
`Header not allowed by Access-Control-Allow-Headers`	Header personnalisé non autorisé

Débogage CORS

L'erreur CORS se manifeste uniquement dans le navigateur. Si vous testez votre API avec un outil comme curl ou Postman, vous ne verrez jamais d'erreur CORS : ce mécanisme est propre au navigateur.

Pourquoi une requête de http://localhost:3000 vers http://localhost:5000 est-elle bloquée par CORS ?

HTTP Caching

Le caching HTTP permet de stocker les réponses pour éviter de refaire des requêtes inutiles. Bien utilisé, il améliore considérablement les performances et réduit la charge serveur.

Principe

Chargement du diagramme…

Headers principaux

Header	Rôle	Exemple
`Cache-Control`	Politique de cache	`max-age=3600` (1 heure)
`Expires`	Date d'expiration absolue	`Thu, 01 Dec 2026 16:00:00 GMT`
`Last-Modified`	Dernière modification	`Wed, 25 Mar 2026 10:00:00 GMT`
`ETag`	Identifiant unique du contenu	`"abc123"`

Cache-Control

Le header le plus important pour contrôler le cache :

python

from flask import make_response

@books_bp.route('', methods=['GET'])
def get_books():
    books = book_service.find_all()
    response = make_response(jsonify(books), 200)
    # Cache valide pendant 5 minutes
    response.headers['Cache-Control'] = 'public, max-age=300'
    return response

@books_bp.route('/me', methods=['GET'])
def get_my_profile():
    user = get_current_user(request)
    response = make_response(jsonify(user), 200)
    # Données privées : pas de cache partagé
    response.headers['Cache-Control'] = 'private, no-cache'
    return response

Directives Cache-Control courantes

Directive	Signification
`public`	Le cache peut être partagé (CDN, proxy)
`private`	Cache uniquement côté client
`max-age=N`	Durée de validité en secondes
`no-cache`	Toujours revalider avec le serveur
`no-store`	Ne jamais stocker en cache

Où se trouve le cache ?

Le cache peut exister à plusieurs niveaux :

Navigateur : cache local du client
CDN (Content Delivery Network) : serveurs intermédiaires répartis géographiquement
Proxy inverse : serveur placé devant l'API (Nginx, Varnish)

Quelle directive Cache-Control utiliser pour des données sensibles d'un utilisateur connecté ?

À retenir

Points clés

CORS est un mécanisme de sécurité du navigateur qui bloque les requêtes cross-origin
Une origine est définie par le triplet protocole + domaine + port
Configurez CORS côté serveur avec les origines autorisées (jamais * en production)
Les erreurs CORS ne se manifestent que dans le navigateur, pas dans Postman ou curl
Le caching HTTP améliore les performances en stockant les réponses
Utilisez Cache-Control pour définir la politique de cache de chaque endpoint
Données publiques → public, max-age=N ; données privées → private, no-cache