In den bisherigen Modulen haben wir eine fantastische, monolithische Web-Applikation aufgebaut. Wenn du dein System jedoch für die Zukunft rüsten willst, ist die Entwicklung einer Contao 5 Headless CMS API der logische nächste Schritt. Der Trend im E-Commerce und bei großen Enterprise-Projekten geht massiv in Richtung Multi-Channel. Der Vermieter unserer Strandkörbe möchte seine Körbe bald nicht mehr nur über die klassische Website vermieten, sondern auch über eine Smartphone-App, eine Smartwatch-Benachrichtigung oder ein Kiosk-Terminal direkt an der Strandpromenade.

Um all diese verschiedenen Plattformen bedienen zu können, ohne den Code fünfmal neu zu schreiben, müssen wir unsere Architektur aufbrechen. Wir machen Contao "Headless" (kopflos).

Was bedeutet "Headless" eigentlich? (Die PlayStation-Metapher)

Der Begriff "Headless" bezeichnet die architektonische Trennung (Entkopplung) von Backend (Content-Repository) und Frontend (Präsentationsschicht).

Um das einfach zu erklären, nutzen wir eine Metapher aus der Hardware-Welt: Stell dir Contao wie eine Spielkonsole (z. B. eine PlayStation) vor. Die Konsole selbst ist das Backend. Sie verarbeitet die Spieldaten, speichert Spielstände und berechnet die Grafik. Aber: Die Konsole hat keinen eigenen Bildschirm. Sie ist "Headless". Du kannst sie per HDMI-Kabel an einen riesigen Fernseher, an einen kleinen Computermonitor oder sogar an einen Beamer anschließen. Die Konsole (Contao) kümmert sich nur um die Bereitstellung der Daten. Das Endgerät (Fernseher/Frontend) entscheidet, wie diese Daten visuell dargestellt werden.

Das Kabel, das diese beiden Welten verbindet, ist unsere API (Application Programming Interface).

Der Paradigmenwechsel in Contao 5

In früheren Contao-Versionen war der Aufbau einer solchen API oft schmerzhaft. Man musste eigene Routen definieren, Daten aus Datenbank-Models mühsam in JSON-Arrays umwandeln und sich selbst um Sicherheitskonzepte wie Authentifizierung kümmern. Das war fehleranfällig und skalierte nicht gut. Erweiterungen wie das heimrichhannot/contao-api-bundle halfen zwar, deckten aber oft nur spezifische Use-Cases ab.

Mit dem vollständigen Umstieg auf die Symfony 6+ Architektur in Contao 5 ändert sich das radikal. Wir haben nun die Möglichkeit, den weltweiten Branchenstandard für PHP-APIs direkt in Contao zu nutzen: API Platform.

API Platform ist ein extrem mächtiges Framework, das sich nahtlos in Symfony einklinkt. Es generiert aus unseren einfachen PHP-Klassen (Entities) vollautomatisch:

Eine vollständige REST-API (inklusive GET, POST, PUT, DELETE).
Eine GraphQL-API.
Eine wunderschöne, interaktive Swagger-UI Dokumentation für die Frontend-Entwickler.
Paginierung, Filterung und Validierung out-of-the-box.

Der Plan für dieses Modul

Wir werden unsere Strandkorb-Plattform in ein modernes, API-gesteuertes Backend verwandeln:

Wir binden das API Platform Framework in unser Contao-Projekt ein.
Wir machen unsere Strandkorb-Buchungen als JSON-Ressource über eine sichere URL (z.B. /api/bookings) verfügbar.
Wir lernen, wie wir mit Serialization Groups steuern, dass sensible Daten (wie E-Mail-Adressen) nicht versehentlich ins Frontend geleakt werden.
Wir sichern unsere Endpunkte ab (Authentication), damit nur befugte Apps Strandkörbe buchen können.
Wir schauen uns Best Practices für den Headless-Betrieb mit modernen Frontend-Frameworks (Vue.js, Nuxt, React) an.

Mach dich bereit, das "Kabel" zwischen deinem Backend und der restlichen Welt zu verlegen!

Abstrakte Darstellung einer Headless CMS Architektur, bei der ein Backend über eine API verschiedene Frontends bedient

1. API Platform in Contao 5 installieren

Da Contao 5 eine vollständige Symfony-Applikation ist, können wir direkt auf den Industriestandard für den Bau von APIs zurückgreifen: API Platform. Dieses Framework nimmt uns 90 % der lästigen Arbeit (wie das Schreiben von Controllern für CRUD-Operationen, Paginierung und Validierung) ab.

Öffne dein Terminal und installiere das Paket in deinem Contao-Root-Verzeichnis:

Bash

composer require api-platform/core

Sobald die Installation abgeschlossen ist, müssen wir Symfony mitteilen, unter welcher URL unsere Contao 5 Headless CMS API erreichbar sein soll. Dazu passen wir die Routing-Konfiguration an.

Erstelle oder ergänze die Datei config/routes.yaml:

YAML

# config/routes.yaml
api_platform:
    resource: .
    type: api_platform
    prefix: /api

Wenn du jetzt deinen Cache leerst (php vendor/bin/contao-console cache:clear) und in deinem Browser die URL deinedomain.de/api aufrufst, siehst du bereits die wunderschöne, automatisch generierte Swagger-UI (eine interaktive API-Dokumentation). Aktuell ist sie jedoch noch leer, da wir noch keine Daten freigegeben haben.

2. Die erste Entity als API-Ressource definieren

Erinnerst du dich an unsere Doctrine Entity Booking aus Teil 4? Diese Klasse repräsentiert unsere Datenbanktabelle tl_booking.

In alten Contao-Versionen hätten wir nun mühsam einen API-Controller schreiben müssen, der die Datenbank abfragt, die Daten in ein JSON-Array umwandelt und dieses zurückgibt. Mit API Platform reicht dafür ein einziges PHP 8 Attribut!

Wir öffnen unsere Klasse src/Entity/Booking.php und fügen das Attribut #[ApiResource] hinzu:

PHP

<?php

namespace Acme\BeachsideBundle\Entity;

use ApiPlatform\Metadata\ApiResource; // <-- NEU
use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM;

// Durch dieses Attribut wird die Klasse sofort zu einem API-Endpunkt!
#[ApiResource]
#[ORM\Entity]
#[ORM\Table(name: 'tl_booking')]
class Booking
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column(length: 255)]
    private ?string $customerName = null;

    #[ORM\Column(length: 255)]
    private ?string $email = null;

    #[ORM\Column(type: Types::DATE_IMMUTABLE)]
    private ?\DateTimeImmutable $dateStart = null;

    // ... Getter und Setter ...
}

3. Die Magie erleben

Lade nun deine Seite deinedomain.de/api im Browser neu. Was du jetzt siehst, ist pure Magie der modernen Webentwicklung: API Platform hat unsere Booking-Entity analysiert und vollautomatisch folgende REST-Endpunkte generiert und detailliert dokumentiert:

GET /api/bookings (Holt eine Liste aller Buchungen, standardmäßig mit Paginierung von 30 Einträgen pro Seite).
POST /api/bookings (Legt eine neue Buchung an).
GET /api/bookings/{id} (Holt die Details einer einzelnen Buchung).
PUT /api/bookings/{id} (Aktualisiert eine komplette Buchung).
PATCH /api/bookings/{id} (Aktualisiert Teile einer Buchung).
DELETE /api/bookings/{id} (Löscht eine Buchung).

Wenn du in der Swagger-UI auf den Button Try it out bei GET /api/bookings klickst und den Request absendest, erhältst du sofort ein perfekt formatiertes JSON-Array mit echten Strandkorb-Buchungen aus deiner Contao-Datenbank (im JSON-LD Format, welches ideal für SEO und verknüpfte Daten ist).

Aber wir haben jetzt ein massives Problem geschaffen! Aktuell gibt die API alle Felder unserer Datenbanktabelle zurück – inklusive sensibler Daten wie der privaten E-Mail-Adresse des Kunden. Außerdem könnte momentan jeder Besucher der Website einfach einen DELETE-Request senden und unsere Buchungen löschen.

Wie wir die Datenausgabe filtern und unsere API absichern, klären wir im nächsten Schritt!

Automatisch generierte Swagger-UI Dokumentation durch API Platform in Contao 5

4. Das Problem des "Data Leakings"

Als wir im vorherigen Schritt das Attribut #[ApiResource] zu unserer Booking-Klasse hinzugefügt haben, hat API Platform standardmäßig einfach alle Eigenschaften (customerName, email, dateStart) in das JSON-Format übersetzt (serialisiert) und an den Browser geschickt.

Für eine öffentliche Contao 5 Headless CMS API ist das ein absolutes No-Go. Stell dir vor, du baust eine Strandkorb-Verfügbarkeits-App, die alle aktuell gebuchten Körbe anzeigt. Die App muss wissen, von wann bis wann ein Korb gebucht ist (dateStart, dateEnd), aber sie darf unter keinen Umständen die private E-Mail-Adresse (email) des Buchenden an alle App-Nutzer ausliefern. Das wäre ein massiver DSGVO-Verstoß.

Die elegante Lösung in der Symfony-Welt lautet: Serialization Groups (Serialisierungs-Gruppen).

5. Serialization Groups: Der Türsteher für deine Daten

Mit Serialization Groups definieren wir exakt, welche Felder ausgelesen (Read / Normalization) und welche Felder von außen geschrieben (Write / Denormalization) werden dürfen.

Wir öffnen wieder unsere Datei src/Entity/Booking.php und erweitern sie um die Konfiguration für die Serialisierung:

PHP

<?php

namespace Acme\BeachsideBundle\Entity;

use ApiPlatform\Metadata\ApiResource;
use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Serializer\Annotation\Groups; // <-- WICHTIG: Import hinzufügen!

// 1. Wir definieren die Kontexte für Lesen (Read) und Schreiben (Write)
#[ApiResource(
    normalizationContext: ['groups' => ['booking:read']],
    denormalizationContext: ['groups' => ['booking:write']]
)]
#[ORM\Entity]
#[ORM\Table(name: 'tl_booking')]
class Booking
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    // IDs dürfen immer gelesen, aber niemals von außen geschrieben (manipuliert) werden!
    #[Groups(['booking:read'])] 
    private ?int $id = null;

    #[ORM\Column(length: 255)]
    // Den Namen darf man beim Buchen angeben (write) und auslesen (read)
    #[Groups(['booking:read', 'booking:write'])] 
    private ?string $customerName = null;

    #[ORM\Column(length: 255)]
    // WICHTIG: Die E-Mail darf man beim Buchen angeben (write), 
    // aber sie wird NIEMALS über die API ausgelesen (kein 'booking:read')!
    #[Groups(['booking:write'])] 
    private ?string $email = null;

    #[ORM\Column(type: Types::DATE_IMMUTABLE)]
    // Das Datum ist öffentlich lesbar und schreibbar
    #[Groups(['booking:read', 'booking:write'])] 
    private ?\DateTimeImmutable $dateStart = null;

    // ... Getter und Setter ...
}

6. Wie funktioniert das im Detail?

Lass uns die Fachbegriffe aufschlüsseln, damit du verstehst, was hier im Hintergrund deiner Contao 5 Headless CMS API passiert:

Normalization (Lesen / GET): Der Prozess, bei dem ein komplexes PHP-Objekt (aus der Datenbank) in ein flaches JSON-Array "normalisiert" wird, um es an den Client (z. B. die Smartphone-App) zu senden. Wir haben definiert, dass hierfür nur Felder verwendet werden dürfen, die das Attribut #[Groups(['booking:read'])] besitzen.
Denormalization (Schreiben / POST, PUT): Der umgekehrte Weg. Das JSON-Array, das vom Smartphone an unseren Server geschickt wird, wird in ein PHP-Objekt "denormalisiert". Hierbei werden nur Felder akzeptiert, die #[Groups(['booking:write'])] besitzen. Versucht ein Hacker, bei einem POST-Request die id künstlich auf 9999 zu setzen, ignoriert API Platform dieses Feld einfach, da die id nicht in der booking:write Gruppe ist.

Wenn du nun die Swagger-UI (deinedomain.de/api) neu lädst und den GET /api/bookings Endpunkt ausführst, wirst du sehen: Die Datenbank liefert dir zwar die Buchungen, aber das Feld email ist aus dem JSON-Output komplett verschwunden! Deine Daten sind sicher.

Ein Problem bleibt jedoch noch offen: Aktuell filtert unsere API zwar die sensiblen Felder heraus, aber immer noch kann jeder anonyme Besucher im Internet einen DELETE /api/bookings/1 Request abfeuern und unsere Buchungen stornieren. Das dürfen natürlich nur Administratoren!

Wie wir unsere Endpunkte mit Symfony Security absichern und Operationen gezielt einschränken, schauen wir uns im nächsten Schritt an.

Darstellung der Datenfilterung durch Symfony Serialization Groups in API Platform

7. Die Gefahr offener REST-Schnittstellen

Standardmäßig ist API Platform extrem entwicklerfreundlich: Sobald du #[ApiResource] über eine Klasse schreibst, werden alle CRUD-Operationen (Create, Read, Update, Delete) für die ganze Welt freigeschaltet. Für ein lokales Test-Setup ist das super, für eine produktive Contao 5 Headless CMS API ist das ein Sicherheitsrisiko.

Wir müssen API Platform genau mitteilen:

Welche Endpunkte (Operationen) überhaupt existieren sollen.
Wer diese Endpunkte aufrufen darf.

8. Operationen explizit definieren

Wir öffnen unsere Datei src/Entity/Booking.php ein weiteres Mal. Wir nutzen nun den Parameter operations innerhalb des #[ApiResource] Attributs. Um dies zu tun, müssen wir die spezifischen Klassen für die HTTP-Methoden (GET, POST, etc.) importieren.

PHP

<?php

namespace Acme\BeachsideBundle\Entity;

use ApiPlatform\Metadata\ApiResource;
use ApiPlatform\Metadata\Delete;
use ApiPlatform\Metadata\Get;
use ApiPlatform\Metadata\GetCollection;
use ApiPlatform\Metadata\Post;
use ApiPlatform\Metadata\Put;
use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Serializer\Annotation\Groups;

#[ApiResource(
    normalizationContext: ['groups' => ['booking:read']],
    denormalizationContext: ['groups' => ['booking:write']],
    // NEU: Wir definieren exakt, welche Routen existieren und wer sie nutzen darf
    operations: [
        // GET /api/bookings (Öffentlich: Die App muss freie Körbe anzeigen können)
        new GetCollection(), 
        
        // POST /api/bookings (Öffentlich: Jeder darf einen Korb buchen)
        new Post(),
        
        // GET /api/bookings/{id} (Öffentlich: Details einer Buchung ansehen)
        new Get(),
        
        // PUT /api/bookings/{id} (GESCHÜTZT: Nur Admins dürfen Buchungen ändern)
        new Put(security: "is_granted('ROLE_ADMIN')"),
        
        // DELETE /api/bookings/{id} (GESCHÜTZT: Nur Admins dürfen stornieren)
        new Delete(security: "is_granted('ROLE_ADMIN')")
    ]
)]
#[ORM\Entity]
#[ORM\Table(name: 'tl_booking')]
class Booking
{
    // ... Eigenschaften (id, customerName, email, dateStart) ...
}

9. Die Integration mit Symfony Security

Schau dir die Zeile security: "is_granted('ROLE_ADMIN')" genau an. Kommt dir das bekannt vor? Das ist exakt dieselbe Symfony-Security-Logik, die wir in Teil 10 (#[IsGranted('ROLE_ADMIN')]) genutzt haben, um unseren Backend-Controller für das Dashboard abzusichern!

Da das API Platform Framework nativ auf Symfony aufbaut, greift es automatisch auf die Benutzerverwaltung von Contao zu.

Was passiert nun, wenn jemand die API aufruft?

Wenn eine anonyme Smartphone-App einen GET-Request sendet, liefert die API die Daten aus (da kein security-Parameter gesetzt ist).
Wenn ein Hacker versucht, einen DELETE-Request an /api/bookings/42 zu senden, prüft Symfony im Hintergrund den aktuellen User-Kontext. Da der Hacker nicht eingeloggt ist (oder nicht die Rolle ROLE_ADMIN hat), blockiert die API den Request sofort und wirft einen sauberen HTTP-Statuscode 403 Forbidden (Zugriff verweigert) zurück.

10. Wie authentifiziert sich ein Frontend? (JWT Basics)

Vielleicht stellst du dir jetzt eine berechtigte Frage: Wie weiß die API eigentlich, ob der Nutzer am Smartphone ein Admin ist? Es gibt in einer App ja keine klassische Contao-Login-Maske mit Session-Cookies!

In der Headless-Welt nutzt man dafür JSON Web Tokens (JWT). Das Prinzip funktioniert so:

Der Administrator öffnet eine spezielle (z. B. in Vue.js geschriebene) Verwaltungs-App auf seinem Tablet.
Er tippt seinen Contao-Benutzernamen und sein Passwort ein. Die App sendet diese per POST an einen speziellen Login-Endpunkt (z. B. /api/login).
Ist das Passwort korrekt, sendet Contao keinen Cookie zurück, sondern einen langen, kryptografischen String: Den JWT.
Die Tablet-App speichert diesen Token. Bei jedem weiteren API-Aufruf (z. B. beim Löschen einer Buchung) hängt die App diesen Token als Stempel an den Request an (Authorization: Bearer <token>).
Symfony liest den Token, erkennt den Admin und gewährt den Zugriff auf das new Delete().

(Hinweis: Für die Einrichtung von JWT in Contao nutzt man in der Regel das Bundle lexik/jwt-authentication-bundle, was wir hier konzeptionell voraussetzen).

Mit diesem Setup ist deine Contao 5 Headless CMS API nicht nur hochgradig flexibel, sondern auf Enterprise-Niveau abgesichert.

Darstellung der rollenbasierten Zugriffskontrolle (RBAC) in der API Platform mit Contao

11. Die Grenzen des Standard-ORMs

Bisher macht API Platform alles vollautomatisch: Es nimmt unsere Doctrine Entity (Booking), schaut in die Datenbank und wirft ein JSON aus. Das ist großartig für einfache Textfelder. Aber in einem echten Contao 5 Headless CMS API-Projekt reicht das oft nicht.

Zwei klassische Probleme aus dem Contao-Alltag:

Bilder (UUIDs): Wenn du in Contao ein Bild speicherst, liegt in der Datenbank oft nur eine binäre UUID (z. B. 0x1234...). Eine Smartphone-App kann damit absolut nichts anfangen. Sie braucht eine fertige URL wie https://deinedomain.de/assets/images/X/strandkorb.jpg.
Berechnete Werte: Der Preis für einen Strandkorb könnte dynamisch sein (Wochenend-Zuschlag, Wetter-Rabatt) und steht nicht statisch in der Datenbank, sondern muss zur Laufzeit (in dem Moment, wo die App anfragt) per PHP berechnet werden.

Um diesen "Bypass" (Umgehung) der Standard-Datenbank-Logik zu bauen, nutzen wir in API Platform 3 das ProviderInterface (den State Provider).

12. Den State Provider erstellen

Ein State Provider ist eine simple PHP-Klasse, die genau eine Aufgabe hat: Sie beschafft die Daten für einen API-Endpunkt. Wenn wir einen eigenen Provider definieren, sagt API Platform: "Okay, ich frage nicht mehr automatisch die Datenbank, sondern ich vertraue blind auf das, was deine Provider-Klasse mir zurückgibt."

Wir fügen unserer Booking-Entity eine neue, virtuelle Eigenschaft $dynamicPrice hinzu (ohne #[ORM\Column], da sie nicht in der Datenbank existiert, aber mit #[Groups(['booking:read'])], damit sie im JSON landet).

Dann erstellen wir unseren eigenen Provider:

Erstelle die Datei /src/BeachsideBundle/src/State/BookingItemProvider.php:

PHP

<?php

namespace Acme\BeachsideBundle\State;

use Acme\BeachsideBundle\Entity\Booking;
use Acme\BeachsideBundle\Repository\BookingRepository;
use ApiPlatform\Metadata\Operation;
use ApiPlatform\State\ProviderInterface;

// Unser eigener Provider implementiert das ProviderInterface von API Platform
class BookingItemProvider implements ProviderInterface
{
    public function __construct(
        private readonly BookingRepository $bookingRepository
        // Hier könntest du auch das Contao Image Studio injizieren, 
        // um Bilder on-the-fly zu berechnen!
    ) {
    }

    public function provide(Operation $operation, array $uriVariables = [], array $context = []): object|array|null
    {
        // 1. Die ID aus der aufgerufenen URL holen (z.B. /api/bookings/42)
        $bookingId = $uriVariables['id'] ?? null;

        if (!$bookingId) {
            return null;
        }

        // 2. Den Datensatz aus der Datenbank holen
        $booking = $this->bookingRepository->find($bookingId);

        if (!$booking) {
            return null; // API Platform wirft dann automatisch einen 404 Fehler
        }

        // 3. KOMPLEXE LOGIK AUSFÜHREN (Die Magie passiert hier!)
        // Wir berechnen z.B. einen dynamischen Preis basierend auf dem aktuellen Datum
        $basePrice = 15.00;
        $isWeekend = (new \DateTime())->format('N') >= 6;
        
        $finalPrice = $isWeekend ? $basePrice + 5.00 : $basePrice;

        // Wir setzen den berechneten Wert in unsere Entität
        $booking->setDynamicPrice($finalPrice);

        // 4. Das modifizierte Objekt an die API zurückgeben
        return $booking;
    }
}

13. Den Provider mit der Entity verknüpfen

Jetzt müssen wir API Platform nur noch mitteilen, dass es für das Auslesen einer einzelnen Buchung (Get) unseren neuen Provider nutzen soll, anstatt den Standard-Weg zu gehen.

Wir öffnen unsere Booking.php Entity und passen die Get-Operation an:

PHP

<?php

namespace Acme\BeachsideBundle\Entity;

use Acme\BeachsideBundle\State\BookingItemProvider; // <-- NEU
use ApiPlatform\Metadata\ApiResource;
use ApiPlatform\Metadata\Get;
// ... andere Imports ...

#[ApiResource(
    normalizationContext: ['groups' => ['booking:read']],
    operations: [
        // ... Post, Delete etc.
        
        // NEU: Wir weisen API Platform an, für diesen Endpunkt unseren Custom Provider zu nutzen!
        new Get(provider: BookingItemProvider::class),
    ]
)]
#[ORM\Entity]
class Booking
{
    // ... bisherige Eigenschaften ...

    // Eine "virtuelle" Eigenschaft (nicht in der DB gespeichert!)
    #[Groups(['booking:read'])]
    private ?float $dynamicPrice = null;

    public function getDynamicPrice(): ?float
    {
        return $this->dynamicPrice;
    }

    public function setDynamicPrice(?float $dynamicPrice): self
    {
        $this->dynamicPrice = $dynamicPrice;
        return $this;
    }
}

Das Resultat: Maximale Flexibilität

Wenn du jetzt in deiner Smartphone-App den Request GET /api/bookings/42 abfeuerst, durchläuft Contao deinen eigenen BookingItemProvider. Du erhältst im JSON-Output nun das Feld "dynamicPrice": 20.0.

Mit diesem Konzept kannst du alles aus Contao in deine Headless-Applikation exportieren. Du könntest einen Provider schreiben, der alte tl_news Artikel aus den klassischen Contao-Models (NewsModel::findAll()) ausliest, die Contao-Insert-Tags ({{link_url::*}}) parst und als sauberes JSON an ein Vue.js-Frontend schickt.

State Provider sind die Brücke zwischen dem klassischen Contao-Core und der modernen API-First-Welt!

Darstellung eines State Providers in API Platform, der Datenbank-Daten um berechnete Logik anreichert

14. Das Frontend: Die andere Seite des Kabels

Erinnern wir uns an die PlayStation-Metapher: Contao ist jetzt unsere Konsole, die API ist das HDMI-Kabel. Wir brauchen nun einen Fernseher – das Frontend.

In der modernen Webentwicklung nutzt man dafür häufig sogenannte Single Page Applications (SPA) oder Frameworks für Server-Side-Rendering (SSR) wie Vue.js (Nuxt.js) oder React (Next.js). Diese Frameworks laufen völlig autark, oft sogar auf einem komplett anderen Server als Contao. Sie wissen nichts von Twig, DCA oder PHP. Sie verstehen nur eines: JSON.

15. Daten abrufen (Beispiel mit Vue.js / Nuxt 3)

Lass uns ein stark vereinfachtes Beispiel ansehen, wie ein Entwickler in einer Nuxt 3 App unsere Strandkorb-Buchungen aus der Contao 5 Headless CMS API abruft und auf dem Bildschirm rendert.

Das Frontend-Script macht einen einfachen HTTP GET Request an unsere API-URL:

Code-Snippet

<template>
  <div>
    <h1>Aktuelle Strandkorb-Buchungen</h1>
    
    <p v-if="pending">Daten werden aus Contao geladen...</p>

    <ul v-else>
      <li v-for="booking in bookings['hydra:member']" :key="booking.id">
        Kunde: {{ booking.customerName }} <br>
        Datum: {{ booking.dateStart }} <br>
        Preis: {{ booking.dynamicPrice }} €
      </li>
    </ul>
  </div>
</template>

<script setup>
// Nuxt 3 Fetch-Funktion ruft unsere Contao API auf
// Das Ergebnis wird reaktiv in der Variable 'bookings' gespeichert
const { data: bookings, pending } = await useFetch('https://api.dein-strandkorb.de/api/bookings', {
  headers: {
    // Falls wir geschützte Daten abrufen würden, käme hier unser JWT-Token rein:
    // 'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIs...'
  }
})
</script>

Achte auf das Feld bookings['hydra:member']. API Platform nutzt standardmäßig das Format JSON-LD (verbunden mit dem Hydra-Vokabular). Das bedeutet, dass die API nicht nur rohe Daten liefert, sondern auch Metadaten: Wie viele Seiten gibt es insgesamt? Wo ist der Link zur nächsten Seite? Das macht die Paginierung im Frontend extrem einfach.

16. CORS: Der Endgegner der API-Entwicklung

Wenn du den obigen Vue.js-Code lokal testest (dein Frontend läuft z.B. auf http://localhost:3000 und dein Contao auf http://localhost:8000), wirst du im Browser eine rote Fehlermeldung sehen, die fast jeden API-Anfänger zur Verzweiflung treibt:

Access to fetch at '...' from origin '...' has been blocked by CORS policy.

Was ist CORS (Cross-Origin Resource Sharing)? Das ist ein Sicherheitsmechanismus moderner Webbrowser. Ein Browser verbietet es einem JavaScript-Programm, das auf Domain A (Frontend) läuft, Daten von Domain B (Contao Backend) abzurufen – es sei denn, Domain B erlaubt dies ausdrücklich!

Da wir API Platform nutzen, ist die Lösung bereits in Contao vorinstalliert: Das NelmioCorsBundle. Wir müssen Contao nur konfigurieren, damit es unserem Vue.js-Frontend vertraut.

Erstelle oder öffne die Datei config/packages/nelmio_cors.yaml in deiner Contao-Installation:

YAML

nelmio_cors:
    defaults:
        origin_regex: true
        allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
        allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
        allow_headers: ['Content-Type', 'Authorization']
        expose_headers: ['Link']
        max_age: 3600
    paths:
        # Wir erlauben CORS explizit für unsere API-Routen!
        '^/api/':
            allow_origin: ['*'] # Für Entwicklung: Erlaubt ALLE Frontends (Vorsicht im Live-Betrieb!)
            allow_headers: ['Content-Type', 'Authorization']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
            max_age: 3600

Wichtiger Hinweis für den Live-Betrieb: Ersetze ['*'] durch die exakte Domain deines Frontends (z. B. ['https://mein-strandkorb-frontend.de']), damit nicht fremde Webseiten deine API über den Browser ihrer Nutzer anzapfen können.

Wenn du den Cache leerst, sendet Contao die korrekten HTTP-Header (Access-Control-Allow-Origin) zurück. Dein Vue.js-Frontend darf die Daten nun lesen und anzeigen!

Darstellung der Kommunikation zwischen einem Vue.js Frontend und einer Contao API über die CORS-Schranke

17. Best Practices für deine Headless Architektur

Wenn du eine Contao 5 Headless CMS API produktiv betreibst, gelten andere Spielregeln als bei einer klassischen Website. Deine API ist das Fundament für potenziell unzählige externe Frontends. Beachte daher diese Best Practices:

Caching ist Pflicht: JSON-Antworten lassen sich hervorragend cachen. API Platform bringt eine native Integration für HTTP-Cache-Header und Systeme wie Varnish mit. Wenn sich an deinen Strandkorb-Buchungen nichts ändert, sollte die API die Daten aus dem Cache im Millisekunden-Bereich ausliefern, ohne die Contao-Datenbank überhaupt zu berühren.
Das N+1 Query Problem vermeiden: Wenn du Listen über die API abrufst (z.B. alle Buchungen inklusive der verknüpften Kundendaten), feuert Doctrine im Hintergrund oft für jeden einzelnen Datensatz eine neue Datenbankabfrage ab. Nutze in API Platform sogenannte DataProvider oder Doctrine Extensions, um Tabellen-Joins (LEFT JOIN) sauber aufzulösen.
Rate Limiting aktivieren: Da APIs oft von automatisierten Skripten (oder böswilligen Bots) aufgerufen werden, solltest du in Symfony das Rate Limiting konfigurieren. Erlaube z.B. maximal 60 API-Aufrufe pro Minute pro IP-Adresse, um deinen Server vor Überlastung zu schützen.

Abstrakte Darstellung eines Contao 5 Backend-Servers, der über leuchtende API-Schnittstellen Daten an verschiedene Frontends (Mobile, Desktop, IoT) verteilt.

#api

Contao 5 Headless CMS API: REST-Schnittstellen bauen