Comprendre le flux de données
L'architecture headless repose sur trois composants qui ne se connaissent que via l'API :
Client (navigateur)\n ↓ requête HTTP\nNuxt 3 (SSR - port 3000)\n ↓ fetch API REST\nPrestaShop WebService (port 8080)\n ↓ requête SQL\nMariaDB (port 3306 - interne)Voici comment chaque composant est configuré :
PrestaShop — Activer le WebService
Dans le back-office PS : Paramètres avancés → Webservice. Créer une clé API avec les permissions adaptées (lecture produits, catégories, clients, commandes). Cette clé est votre pont sécurisé entre les deux systèmes.
Nuxt 3 — Consommer l'API PS
Dans nuxt.config.ts, configurez les variables d'environnement :
runtimeConfig: {\n psApiUrl: process.env.PS_API_URL,\n psApiKey: process.env.PS_API_KEY\n}Dans un server route (server/api/products.ts) :
const config = useRuntimeConfig()\nconst data = await $fetch(\n `${config.psApiUrl}/api/products`,\n { headers: { 'Authorization': `Basic ${btoa(config.psApiKey + ':')}` } }\n)Le piège du Host header
Dans un environnement Docker, PrestaShop vérifie le Host header. Si Nuxt appelle PS via le réseau Docker interne sans spécifier le bon Host, PS renvoie une redirection 302 en boucle. Toujours forcer le header Host vers le domaine configuré dans PS.
- Nuxt interroge PS via réseau Docker interne (rapide, pas de sortie Internet)
- PS répond en XML ou JSON selon le paramètre
output_format=JSON - Nuxt transforme et sert le HTML pré-rendu au client