EINE zentrale axios-Instanz statt WIEDERHOLTER fetch()-Aufrufe mit VOLLER URL – GENAU der Ansatz aus den vorherigen React-Magento-API-Tutorials, hier auf API Platform übertragen.

Die Umgebungsvariable einrichten

VITE_API_URL=https://localhost/api

Den Client erstellen

import axios from 'axios';

export const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  headers: {
    'Content-Type': 'application/ld+json',
  },
});

application/ld+json statt schlichtem application/json – API Platform akzeptiert BEIDE (Kapitel 10), aber ld+json nutzt die VOLLEN JSON-LD-Fähigkeiten (z. B. @id-Erkennung bei verschachtelten Ressourcen aus Block 5).

Die erste Verwendung

import { apiClient } from './api/client';

const response = await apiClient.get('/projects');
console.log(response.data);

/projects statt der VOLLEN URL – baseURL übernimmt den GEMEINSAMEN Präfix, GENAU wie in Kapitel 8, aber JETZT ZENTRAL an EINER Stelle statt in JEDEM einzelnen Aufruf wiederholt.

Selbstsignierte Zertifikate im Browser

GENAU wie curl -k in ALLEN vorherigen Kapiteln das selbstsignierte Zertifikat IGNORIERT hat, muss der Browser EINMALIG unter https://localhost/api DIREKT besucht und die Sicherheitswarnung MANUELL akzeptiert werden – SONST schlagen axios-Requests aus React mit einem Netzwerkfehler fehl, OHNE aussagekräftige Fehlermeldung.