Zum Abschluss von Block 1 verbinden wir BEIDE Projekte zum ERSTEN Mal – React ruft die Begruessung-Resource aus Kapitel 5 ab.

Ein erwartetes Problem: CORS

aufgaben-manager-web läuft auf http://localhost:5173, aufgaben-manager-api auf https://localhost – ZWEI UNTERSCHIEDLICHE Origins. Browser blockieren standardmäßig Anfragen zwischen unterschiedlichen Origins ("Cross-Origin"), es sei denn, der Server erlaubt es EXPLIZIT.

// src/App.tsx - ERSTER Versuch, wird an CORS scheitern
import { useEffect, useState } from 'react';

function App() {
  const [nachricht, setNachricht] = useState('');

  useEffect(() => {
    fetch('https://localhost/api/begruessung', {
      headers: { Accept: 'application/json' },
    })
      .then((response) => response.json())
      .then((data) => setNachricht(data.nachricht));
  }, []);

  return <h1>{nachricht || 'Lädt...'}</h1>;
}

export default App;

CORS minimal freischalten

CORS_ALLOW_ORIGIN='^https?://localhost:[0-9]+$'

Diese Distribution bringt nelmio/cors-bundle bereits VORINSTALLIERT mit – CORS_ALLOW_ORIGIN als regulärer Ausdruck erlaubt HIER jeden localhost-Port, GENAU passend für unser React-Dev-Server (Port 5173).

docker compose restart php

Den Verbindungstest durchführen

Laden Sie http://localhost:5173 neu – die Nachricht aus Kapitel 5 sollte jetzt ERFOLGREICH erscheinen, statt bei "Lädt..." hängen zu bleiben.

Was dieser Test bewiesen hat

• Beide Docker-/Dev-Server laufen UNABHÄNGIG voneinander UND können miteinander sprechen.
• CORS ist korrekt konfiguriert – ZUMINDEST minimal, Kapitel 54 vertieft das für Produktion.
• Die grundlegende fetch()-basierte Anfrage funktioniert – Kapitel 74 ersetzt sie durch einen strukturierteren axios-Client.