Quatrième étape du projet pratique : réalisez le mariage technique entre votre application cliente et votre API distante. Configurez les variables d'environnement, ajustez la politique CORS et vérifiez l'échange complet de données de bout en bout.
Le frontend pointe vers l'URL HTTPS réelle de l'API déployée à l'étape 2.
L'API accepte uniquement les requêtes provenant du domaine frontend Vercel/Netlify.
En-tête Authorization: Bearer <token> transmis dans chaque requête HTTP cliente.
Inscription d'un utilisateur de test depuis l'interface et vérification de la persistance en BDD.
# 1. Configurer la variable d'environnement sur le projet Vercel : $ vercel env add NEXT_PUBLIC_API_URL production ? What's the value of NEXT_PUBLIC_API_URL? https://api-learnweb.onrender.com/api/v1 ✅ Environment variable NEXT_PUBLIC_API_URL added to production ! # 2. Re-déployer le frontend pour injecter la nouvelle variable dans le build : $ vercel --prod # 3. Mettre à jour les variables CORS sur l'API (sur Render / Railway) : ALLOWED_ORIGIN="https://learnweb-frontend.vercel.app" # 4. Tester l'appel API en simulant l'en-tête Origin du navigateur : $ curl -I -X GET https://api-learnweb.onrender.com/api/v1/products -H "Origin: https://learnweb-frontend.vercel.app" HTTP/2 200 access-control-allow-origin: https://learnweb-frontend.vercel.app access-control-allow-credentials: true # ✅ Les deux applications communiquent en parfaite harmonie !
http:// pour éviter le blocage Mixed Content).https://learnweb.vercel.app) figure dans le tableau allowedOrigins du middleware CORS de l'API.localStorage ou dans un cookie sécurisé.Les serveurs gratuits se mettent en veille après 15 minutes d'inactivité. La première requête peut mettre 30 à 50 secondes à réveiller le conteneur.
Ajoutez un indicateur de chargement soigné (Spinner) dans votre interface utilisateur frontend pour que vos visiteurs sachent que le serveur s'initialise !
| Symptôme Observé | Cause Probable | Action Corrective |
|---|---|---|
| La requête API échoue immédiatement (CORS Error) | L'URL Vercel manque dans le middleware CORS de l'API | Ajouter l'URL exacte du frontend dans allowedOrigins sur le backend |
| La requête charge pendant 60s puis échoue | Cold start du serveur gratuit ou BDD inaccessible | Vérifier les logs du backend sur Render/Railway |
| Erreur 404 sur les appels d'API | Préfixe d'URL erroné (ex: /api au lieu de /api/v1) | Vérifier le chemin exact déclaré dans le routeur Express |
| Mixed Content Error | L'URL de l'API est restée en http:// | Passer la variable d'environnement en https:// et re-déployer |