To wrap up block 1, let's connect BOTH projects for the FIRST time – React fetches the Greeting resource from chapter 5.

An expected problem: CORS

aufgaben-manager-web runs on http://localhost:5173, aufgaben-manager-api on https://localhost – TWO DIFFERENT origins. Browsers block requests between different origins ("cross-origin") by default, unless the server EXPLICITLY allows it.

// src/App.tsx - FIRST attempt, will fail on CORS
import { useEffect, useState } from 'react';

function App() {
  const [message, setMessage] = useState('');

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

  return <h1>{message || 'Loading...'}</h1>;
}

export default App;

Enabling CORS minimally

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

This distribution already ships with nelmio/cors-bundle PRE-INSTALLED – CORS_ALLOW_ORIGIN as a regular expression allows ANY localhost port HERE, EXACTLY matching our React dev server (port 5173).

docker compose restart php

Running the connectivity test

Reload http://localhost:5173 – the message from chapter 5 should now SUCCESSFULLY appear, instead of getting stuck on "Loading...".

What this test proved

• Both Docker/dev servers run INDEPENDENTLY of each other AND can talk to each other.
• CORS is correctly configured – AT LEAST minimally, chapter 54 goes deeper for production.
• The basic fetch()-based request works – chapter 74 replaces it with a more structured axios client.