WordPress-REST-Nonce-Authentifizierung mit React: Ein Leitfaden für britische Entwickler
17. August 2026
Erfahren Sie, wie Sie WordPress-REST-API-Anfragen von React aus mit Nonces authentifizieren. UK-Entwicklertipps, häufige Fallstricke und Codebeispiele.
Verstehen des WP REST Nonce und warum React es braucht
Beim Erstellen eines React-Frontends mit WordPress als Backend reicht für authentifizierte Anfragen an die REST-API ein angemeldeter Benutzer allein nicht aus. WordPress verwendet Nonces, eine Art Sicherheitstoken, um zu überprüfen, dass Anfragen von einer vertrauenswürdigen Quelle stammen. Ohne ein Nonce schlagen Versuche, Beiträge zu erstellen, zu aktualisieren oder zu löschen – oder sogar private Daten abzurufen – mit einem 401- oder 403-Fehler fehl. Im Vereinigten Königreich, wo Datenschutz- und Sicherheitskonformität ernst genommen werden, ist das Verständnis von Nonces unerlässlich. React-Anwendungen laufen oft getrennt von WordPress, wodurch die standardmäßige Cookie-basierte Authentifizierung nicht funktioniert. Das Nonce fungiert als Brücke und ermöglicht es Ihrer React-App, nachzuweisen, dass sie legitim mit einer angemeldeten Benutzersitzung verbunden ist. Dieser Leitfaden führt Sie durch den gesamten Prozess, von der Generierung des Nonces in PHP bis zum Senden aus React.
Nonce-Generierung in WordPress einrichten (Theme oder Plugin)
The first step is to generate a nonce in Ihre WordPress environment. You can do this in Ihre theme's functions.php file or a custom plugin. The REST API uses a special nonce action called 'wp_rest'. To create one, use wp_create_nonce('wp_rest'). für example, add this to Ihre theme: <?php $rest_nonce = wp_create_nonce('wp_rest'); ?>. You then need to expose this nonce to Ihre React application. A common approach is to localise a script using wp_localize_script(), passing the nonce as a global variable. In a UK development context, make sure Ihre theme is properly enqueued—use wp_enqueue_script mit a dependency on wp-element if you're using React. This ensures Ihre script loads after React und has access to the nonce value. Remember to call this function on every page load to keep the nonce fresh.
Das Nonce mit React senden (mit Fetch oder Axios)
Sobald Ihre React-App das Nonce erhalten hat, müssen Sie es in jede REST-API-Anfrage einfügen. WordPress erwartet das Nonce im 'X-WP-Nonce'-Header. Wenn Sie die globale Fetch-API verwenden, könnte Ihre Anfrage wie folgt aussehen: fetch('/wp-json/wp/v2/posts', { method: 'POST', headers: { 'X-WP-Nonce': nonce, 'Content-Type': 'application/json' }, body: JSON.stringify(data) }). Mit Axios, das viele britische Entwickler wegen seiner übersichtlicheren API bevorzugen, können Sie Standard-Header festlegen: axios.defaults.headers.common['X-WP-Nonce'] = nonce. Alternativ können Sie einen Interceptor verwenden, um den Header dynamisch hinzuzufügen. Seien Sie vorsichtig mit dem Nonce-Wert – wenn Sie ihn in ein lokalisiertes Skript kodiert haben, stellen Sie sicher, dass Sie ihn korrekt über eine globale Variable wie window.wpRestNonce abrufen. Verwenden Sie für britische Websites mit benutzerdefinierten Domains oder Unterverzeichnissen immer relative Pfade, um Cross-Origin-Probleme zu vermeiden.
Häufige Authentifizierungsfehler (und wie man sie vermeidet)
Auch erfahrene britische Entwickler stoßen bei Nonces auf Hindernisse. Ein klassischer Fehler ist die Verwendung des falschen Aktionsnamens – verwenden Sie für REST-API-Aufrufe immer „wp_rest“. Ein weiterer Fehler ist zu vergessen, dass Nonces nach 12 bis 24 Stunden ablaufen, abhängig von Ihrer WordPress-Konfiguration. Dies kann zu rätselhaften Fehlern bei Benutzern führen, die die Website geöffnet lassen. Eine dritte Falle ist das Caching. Viele britische WordPress-Websites verwenden Caching-Plugins wie WP Rocket oder serverseitiges Caching, die ein altes Nonce speichern können. Stellen Sie sicher, dass Ihr Theme oder Plugin keine gecachten Nonces ausliefert – generieren Sie sie dynamisch über einen Endpoint oder aktualisieren Sie sie regelmäßig. Wenn Sie außerdem lokal entwickeln, beachten Sie, dass Nonces an das Session-Cookie gebunden sind. Sie müssen also in WordPress angemeldet sein. Bei einem React-Entwicklungsserver auf einem anderen Port (z. B. localhost:3000) müssen Sie Anfragen per Proxy weiterleiten oder CORS-Header verwenden, um Cookies korrekt zu senden.
UK-spezifische Überlegungen: GDPR, Localhost und Hosting
Für Websites im Vereinigten Königreich sind Datenschutz und Privatsphäre nicht nur technische Details – sie sind rechtliche Verpflichtungen gemäß DSGVO. Wenn du Nonces zwischen React und WordPress übergibst, verarbeitest du Sitzungstokens. Stelle daher sicher, dass deine Verbindung in der Produktion über HTTPS läuft. Setze Nonces niemals in clientseitigem Code ein, der missbraucht werden könnte; sie sind an Benutzersitzungen gebunden, sodass ein gestohlenes Nonce es einem Angreifer ermöglichen könnte, sich als Benutzer auszugeben, wenn auch die Sitzung kompromittiert ist. Auf localhost verwenden viele britische Entwickler Tools wie Local by Flywheel oder Lando. Diese schaffen eine vertrauenswürdige Umgebung, aber du musst in einer produktionsähnlichen Umgebung testen, um Nonce-Probleme zu erkennen, insbesondere bei gemischten HTTP/HTTPS-Inhalten. Achte auch auf britische Hosting-Anbieter wie 123 Reg, Fasthosts oder Krystal – einige haben aggressives Caching oder Sicherheits-Firewalls, die Nonce-Header blockieren könnten. Nimm deine API-Routen bei Bedarf auf die Whitelist.
FAQ
Rufen Sie in Ihrem WordPress-Theme oder -Plugin `wp_create_nonce('wp_rest')` auf, um eine Nonce zu generieren. Machen Sie sie Ihrer React-App über `wp_localize_script()` zugänglich. Diese Nonce muss bei jeder REST-API-Anfrage über den `X-WP-Nonce`-Header mitgesendet werden. Verwenden Sie immer die Aktion `wp_rest`, um sicherzustellen, dass WordPress sie für REST-Routen akzeptiert.