90% des pannes constatées juste après un déploiement full-stack proviennent de blocages de communication. Sachez diagnostiquer et résoudre les erreurs de Mixed Content (HTTPS/HTTP), les rejets CORS de pré-vol OPTIONS et les problèmes de cookies inter-domaines.
Un site sécurisé en HTTPS est interdit par le navigateur d'appeler une API en HTTP.
Le backend n'a pas répondu avec 204/200 à la requête de vérification préalable (Preflight).
En multi-domaines, un cookie d'authentification exige SameSite=None; Secure.
Incompatibilité de formats JSON (ex: chaîne au lieu d'entier, fuseau horaire UTC désynchronisé).
// Configuration complète du middleware CORS pour API Express en production :
import express from 'express';
import cors from 'cors';
const app = express();
// 1. Liste blanche stricte des origines frontend autorisées
const allowedOrigins = [
'https://learnweb.com',
'https://www.learnweb.com',
'https://staging.learnweb.com'
];
app.use(cors({
origin: (origin, callback) => {
// Autoriser les requêtes sans origine (comme les outils mobiles ou curl de santé)
if (!origin || allowedOrigins.includes(origin)) {
callback(null, true);
} else {
callback(new Error(`Origine non autorisée par la politique CORS : ${origin}`));
}
},
credentials: true, // Indispensable pour transmettre les cookies de session et tokens
methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With']
}));
// 2. Gestion explicite des requêtes OPTIONS (Preflight)
app.options('*', cors());Mixed Content: The page at 'https://learnweb.com' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://198.51.100.42:3000/api'. This request has been blocked.
Les navigateurs modernes refusent catégoriquement qu'une page chiffrée (HTTPS) appelle une API non chiffrée (HTTP), car un pirate pourrait intercepter et modifier les données en clair. La solution obligatoire : attribuer un sous-domaine avec certificat SSL à votre API (https://api.learnweb.com).
monsite.vercel.app et votre API sur api-monsite.onrender.com : SameSite=None; Secure; HttpOnly.withCredentials: true dans chaque requête HTTP !| Message d'Erreur dans la Console F12 | Cause Technique Réelle | Correctif Immédiat |
|---|---|---|
| Mixed Content: blocked | Frontend en HTTPS appelle une API en HTTP | Activer HTTPS sur l'API (Let's Encrypt / Cloudflare) |
| No 'Access-Control-Allow-Origin' header is present | L'API ne déclare pas l'origine frontend dans ses headers CORS | Ajouter l'URL du frontend dans le middleware CORS de l'API |
| Response to preflight request doesn't pass access control | La requête OPTIONS préalable a échoué ou renvoyé 403/500 | Autoriser la méthode OPTIONS sans authentification préalable |
| 401 Unauthorized sur requêtes suivantes | Le cookie de session ou header Authorization n'est pas transmis | Vérifier withCredentials: true côté front et credentials: true côté back |