Chapitre 6.2 : Configuration CORS

Temps d'étude : 30 minutes

---

1. CORS : Qu'est-ce que c'est et pourquoi est-ce nécessaire ?

Comme nous l'avons découvert, le CORS (Cross-Origin Resource Sharing) est une politique de sécurité des navigateurs. Elle empêche une situation où un site malveillant evil-site.com, en votre nom (en utilisant vos cookies), ferait des requêtes à your-bank.com et volerait des données.

Comment cela fonctionne-t-il ?

1. Le Frontend (navigateur) depuis le domaine A souhaite obtenir des données du domaine B.
2. Le navigateur envoie au domaine B une requête "préliminaire" spéciale (requête de pré-vol ou "preflight request") avec la méthode OPTIONS, demandant : "Hé, domaine B, puis-je, moi, domaine A, te faire une requête GET ?"
3. Le Backend (serveur sur le domaine B) doit répondre avec des en-têtes HTTP spéciaux, par exemple : Access-Control-Allow-Origin: A.
4. Si la réponse du serveur autorise la requête, le navigateur envoie la requête GET principale. Sinon, il la bloque et affiche une erreur CORS.

💡 Analogie spatiale :

Avant de téléporter le capitaine vers une station étrangère (envoyer une requête POST), le vaisseau (le navigateur) envoie un drone (une requête OPTIONS) avec la question : "Station, acceptez-vous la téléportation depuis le vaisseau 'Enterprise' ?". La station (l'API) répond : "Oui, la réception depuis l''Enterprise' est autorisée" (en-tête Access-Control-Allow-Origin). C'est seulement après cela que la téléportation commence.

---

2. Configuration CORS dans Laravel (Approche moderne pour Laravel 11+)

Dans Laravel 11+, la configuration CORS est devenue beaucoup plus simple et ne nécessite pas la publication du fichier config/cors.php si vous avez besoin de réglages de base. Tout est géré via le fichier .env et bootstrap/app.php.

Étape 1 : Configuration via les variables d'environnement

Ouvrez votre fichier .env. Laravel fournit déjà par défaut des variables pour gérer le CORS pour l'API.

# .env

# ... autres variables

# Spécifiez les chemins pour lesquels CORS sera actif.
# 'api/*' - valeur standard pour toutes les routes API.
CORS_PATHS=api/*

# Spécifiez les origines (domaines) autorisées.
# Pour le développement, indiquez l'adresse de votre frontend.
# Vous pouvez les lister séparées par des virgules, sans espaces.
CORS_ALLOWED_ORIGINS=http://localhost:5500,http://127.0.0.1:5500

# Autres paramètres (généralement, peuvent être laissés par défaut)
CORS_ALLOWED_METHODS=*
CORS_ALLOWED_HEADERS=*
CORS_EXPOSED_HEADERS=
CORS_MAX_AGE=0
CORS_SUPPORTS_CREDENTIALS=false

Variables clés :

• CORS_ALLOWED_ORIGINS : La variable la plus importante. Ici, vous listez les domaines à partir desquels les requêtes sont autorisées. * autorise tout le monde, mais c'est

extrêmement dangereux pour la production.

• CORS_PATHS : Chemins auxquels ces règles s'appliquent. api/* signifie tout ce qui commence par /api/.

Après avoir modifié le .env, il n'est pas nécessaire de redémarrer le serveur si vous utilisez php artisan serve. Les modifications seront prises en compte automatiquement.

Étape 2 (Optionnel) : Configuration avancée dans bootstrap/app.php

Si vous avez besoin d'une logique plus complexe (par exemple, autoriser les sous-domaines à l'aide de motifs), vous devrez tout de même publier le fichier de configuration et configurer le middleware. Mais pour 95% des cas, le fichier .env est suffisant.

La commande php artisan install:api configure automatiquement le middleware CORS de base pour les routes API dans le fichier bootstrap/app.php. Cela ressemble à ceci :

// bootstrap/app.php
->withMiddleware(function (Middleware $middleware) {
    // Cette ligne sera déjà ajoutée par la commande install:api
    // C'est elle qui active le traitement CORS pour toutes les routes API
    $middleware->api(base_path('routes/api.php'));
})

À l'intérieur de ->api(), Laravel utilise déjà le middleware HandleCors, qui lit les paramètres de votre .env. C'est simple et prêt à l'emploi.

⚠️ Important ! N'utilisez pas CORS_ALLOWED_ORIGINS='*' sur un serveur de production si votre API n'est pas entièrement publique. Cela ouvre une vulnérabilité potentielle. Listez toujours les domaines spécifiques de votre frontend.

---

3. Configuration CORS dans FastAPI

FastAPI utilise le concept de Middleware (logiciel intermédiaire) pour gérer des tâches transversales telles que le CORS.

Étape 1 : Ouvrez le fichier principal de votre application

C'est le fichier où vous créez une instance de FastAPI (généralement main.py).

Étape 2 : Ajoutez CORSMiddleware

FastAPI fournit un middleware prêt à l'emploi pour la configuration CORS.

# main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware # 1. Importez le middleware

app = FastAPI(
    title="SpaceAPI",
    description="API pour la gestion des planètes dans la galaxie",
    version="1.0.0"
)

# 2. Liste des origines autorisées
origins = [
    "http://localhost:5500",
    "http://127.0.0.1:5500",
    # En production, ce sera le domaine de votre frontend
    # "https://my-awesome-app.com",
]

# 3. Ajoutez le middleware à l'application
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,  # Autorise les origines spécifiées
    allow_credentials=True, # Autorise les cookies (nécessaire pour l'authentification)
    allow_methods=["*"],    # Autorise toutes les méthodes (GET, POST, etc.)
    allow_headers=["*"],    # Autorise tous les en-têtes
)

# ... ici vos routeurs et le reste du code

Étape 3 : Redémarrez le serveur Uvicorn Le serveur Uvicorn se recharge généralement automatiquement lorsque le code est modifié. Si ce n'est pas le cas, redémarrez-le manuellement. Désormais, votre serveur FastAPI répondra correctement aux requêtes OPTIONS du frontend.

---

Quiz pour la consolidation

1. La requête que le navigateur envoie avant la requête principale pour vérifier le CORS s'appelle :

a) CHECK request b) Preflight request c) Handshake request

2. Dans Laravel moderne (11+), les paramètres CORS de base sont principalement définis dans :

a) Le fichier bootstrap/app.php b) Le fichier .env c) Le fichier routes/api.php

3. Dans FastAPI, pour configurer CORS, on utilise :

a) Le décorateur @app.cors() b) La classe Security intégrée c) Un logiciel intermédiaire (`Middleware`)

4. Quelle valeur de CORS_ALLOWED_ORIGINS est la plus sûre pour la production ?

a) CORS_ALLOWED_ORIGINS='*' b) CORS_ALLOWED_ORIGINS=http://my-frontend.com,https://my-frontend.com` c) Ne pas définir cette variable

Vérifier

---

🚀 Résumé du chapitre :

Vous êtes devenu un "diplomate des communications interstellaires" ! Vos API peuvent désormais interagir en toute sécurité avec des applications externes, en utilisant des approches modernes et correctes.

• ✅ Compris le mécanisme de fonctionnement du CORS et des requêtes de pré-vol.
• 🔧 Configuré CORS pour Laravel 11+ via le fichier .env.
• ⚙️ Configuré CORS pour FastAPI à l'aide de CORSMiddleware.
• 🛰️ Établi avec succès la connexion entre le frontend et le backend.

Le pont de communication est construit et sécurisé. Il est maintenant temps de réfléchir à la manière de n'autoriser que le "personnel autorisé" à emprunter ce pont.

📌 Vérification :

• Le critère principal de succès est l'absence d'erreurs CORS dans la console du navigateur lors de la demande de données depuis le frontend.
• Dans l'onglet "Network" (Réseau) des outils de développement, vous pouvez voir deux requêtes vers votre API : la première avec la méthode OPTIONS (statut 200/204) et la seconde avec la méthode GET (statut 200). C'est une démonstration visuelle du fonctionnement de CORS.