Wie behebt man CORS-Fehler in WordPress? (Einfache Anleitung)

Wenn Sie eine Website betreiben, sind Fehler unvermeidlich. Ein solches Problem, das allerdings nicht zu den häufigen WordPress-Fehlern, ist der CORS-Fehler.

Dieser Fehler tritt auf, wenn Ihre WordPress-Website versucht, auf Ressourcen von einem anderen Ursprung (Domain, Protokoll oder Port) zuzugreifen, und der Server, der diese Ressourcen hostet, dies nicht zulässt. 

Die Behebung von CORS-Fehlern ist von entscheidender Bedeutung, da diese wichtige Funktionen wie API-Aufrufe, das Laden von Schriftarten und AJAX-Anfragen stören und sich negativ auf die Leistung Ihrer Website und die Benutzerfreundlichkeit auswirken können.

Dieser Leitfaden bietet einen Überblick über die Schritte, die Sie unternehmen können, um CORS-Fehler in WordPress zu identifizieren und zu beheben, damit Ihre Website funktionsfähig und benutzerfreundlich bleibt.

Kurz gesagt: Behebung von Problemen mit Cross-Origin Resource Sharing (CORS)

• Dieser Fehler tritt auf, wenn Ihre Website Ressourcen von einer anderen Domain ohne die erforderlichen Berechtigungsheader anfordert. Browser blockieren diese Anfrage, um die Sicherheit der Benutzer zu gewährleisten.

• Es kann zu Problemen mit API-Aufrufen, Schriftarten, CDN-Ressourcen, AJAX-Anfragen und eingebetteten Widgets führen und somit die Leistung und das Benutzererlebnis beeinträchtigen.

• Identifizieren Sie das Problem mithilfe der Browserkonsole und des Netzwerk-Tabs. Suchen Sie nach blockierten Anfragen und fehlenden Access-Control-Allow-Origin-Headern.

• Das Problem lässt sich beheben, indem Sie die Servereinstellungen, die .htaccess-Datei, die Theme-Funktionen oder die CDN-Regeln aktualisieren oder sich an den Ressourcenanbieter wenden, um die korrekte Konfiguration zu erhalten.

Was ist ein CORS-Fehler?

Cross-Origin Resource Sharing (CORS) ist eine Sicherheitsfunktion, die von Webbrowsern implementiert wird, um zu verhindern, dass bösartige Websites ohne Erlaubnis auf sensible Informationen auf anderen Websites zugreifen.

Es funktioniert, indem geprüft wird, ob der Server, hostet, bestimmte Header enthält, die die Berechtigung für ursprungsübergreifende Anfragen gewähren. 

Ein CORS-Fehler tritt auf, wenn eine Webseite versucht, auf Ressourcen von einer anderen Domain, einem anderen Protokoll oder einem anderen Port zuzugreifen, der Server dies aber nicht zulässt.

Typische Szenarien, in denen CORS-Fehler in WordPress auftreten, sind:

• Abrufen von Daten von einer externen API: Wenn Ihre WordPress-Website versucht, Daten von einer externen API abzurufen, kann ein CORS-Fehler auftreten, wenn der API-Server Ihrer Website den Zugriff auf seine Ressourcen nicht gestattet.

• Laden von Schriftarten von einer anderen Domain: Wenn Sie benutzerdefinierte Schriftarten verwenden, die auf einer anderen Domain gehostet werden, können CORS-Fehler auftreten, wenn der Schriftartenserver Ihrer Website nicht erlaubt, diese Schriftarten zu laden.

• Verwendung eines CDN für statische Assets: Wenn Bilder, CSS- oder JavaScript-Dateien von einem CDN bereitgestellt werden, können CORS-Fehler auftreten, wenn der CDN- Server nicht über die korrekten Header verfügt, die Ihrer Website den Zugriff auf diese Dateien ermöglichen.

• AJAX-Anfragen: Wenn Ihre WordPress-Website AJAX- Anfragen an einen benutzerdefinierten REST-API-Endpunkt auf einer anderen Subdomain sendet, können CORS-Fehler auftreten, wenn der API-Server diese Anfragen nicht explizit zulässt.

• Einbetten von Drittanbieter-Widgets: Schließlich kann das Einbetten von Widgets von anderen Domains mithilfe von iFrames zu CORS-Fehlern führen, wenn der Widget-Server keinen ursprungsübergreifenden Zugriff zulässt.

Wie wirken sich CORS-Fehler auf die Website-Funktionalität und die Benutzererfahrung aus?

CORS-Fehler können wichtige Funktionen Ihrer Website blockieren, beispielsweise das Laden externer Daten, benutzerdefinierter Schriftarten oder Skripte. Dadurch wird Ihre Website möglicherweise nicht korrekt angezeigt oder funktioniert nicht vollständig, was zu einer schlechten Benutzererfahrung führt.

Beispielsweisekönnten Funktionen, die auf externe APIs angewiesen sind, nicht funktionieren, benutzerdefinierte Schriftarten könnten nicht geladen werden oder interaktive Elemente, die AJAX verwenden, könnten nicht mehr funktionieren.

Daher ist die Behebung von CORS-Fehlern unerlässlich, um einen reibungslosen Betrieb Ihrer Website und ein optimales Benutzererlebnis zu gewährleisten.

Identifizieren von CORS-Fehlern in WordPress

Wenn Sie diese Schritte befolgen, können Sie CORS-Fehler auf Ihrer WordPress-Website leicht identifizieren.

Überprüfen Sie die Browserkonsole: Öffnen Sie die Entwicklertools Ihres Browsers (durch Drücken von F12 oder durch Rechtsklick auf die Seite und Auswahl von „Untersuchen“). Wechseln Sie zum Tab „Konsole“, um Fehlermeldungen anzuzeigen.

Suchen Sie in der Konsole nach Meldungen, die „CORS-Richtlinie“ oder „Cross-Origin Resource Sharing“ erwähnen. Diese Meldungen geben in der Regel an, dass eine Ressource aufgrund von CORS blockiert wurde.

Wechseln Sie in den Entwicklertools zum Tab „Netzwerk“ und laden Sie die Seite neu.

• Achten Sie auf rot markierte Anfragen, die fehlgeschlagen sind.
• Klicken Sie auf diese Anfragen, um weitere Details zum Fehler, einschließlich CORS-bezogener Probleme, anzuzeigen.

API-Antwortheader prüfen: Bei der Arbeit mit APIs sollten Sie die Antwortheader im Tab „Netzwerk“ überprüfen. Prüfen Sie, ob der Header „Access-Control-Allow-Origin“ vorhanden und korrekt konfiguriert ist.

Überprüfen Sie die Plugin-Einstellungen: Wenn Sie Plugins verwenden, die mit externen Ressourcen interagieren, überprüfen Sie deren Einstellungen und Dokumentation, um sicherzustellen, dass sie CORS korrekt handhaben.

Nutzen Sie Online-Tools: Verwenden Sie Tools wie CORS Checker , um zu testen, ob die externen Ressourcen, auf die Sie zugreifen möchten, ordnungsgemäß konfiguriert sind, um ursprungsübergreifende Anfragen zuzulassen.

Lesen Sie mehr über: Tipps zur Behebung von WordPress-Aktualisierungs- und Veröffentlichungsfehlern

Beispiele für CORS-Fehler in WordPress und Schritte zu deren Behebung

Hier sind einige häufige Szenarien, in denen CORS-Fehler in WordPress auftreten, sowie einfache Schritte zu deren Behebung.

Beispiel 1: Abrufen externer API-Daten

Ihre WordPress-Website versucht, Daten von einer externen API abzurufen, was jedoch fehlschlägt.

Fehlermeldung:

Der Zugriff auf die URL 'https://api.example.com/data' von der Herkunftsadresse 'https://yourwordpresssite.com' wurde durch die CORS-Richtlinie blockiert: Der Header 'Access-Control-Allow-Origin' ist in der angeforderten Ressource nicht vorhanden.

Lösungsmethode: Bearbeiten Sie die .htaccess-Datei in Ihrem WordPress-Stammverzeichnis:

<IfModule mod_headers.c>Header set Access-Control-Allow-Origin "*"</IfModule>

Dies weist den Server an, jeder Website den Zugriff auf die Ressource zu gestatten.

Lesen Sie auch: Wie man 301-Fehler in WordPress behebt

Beispiel 2: Laden von Schriftarten aus einer anderen Domäne

Ihre WordPress-Website verwendet benutzerdefinierte Schriftarten, die auf einer anderen Domain gehostet werden, aber sie werden nicht geladen.

Fehlermeldung:

Der Zugriff auf die Schriftart unter 'https://fonts.example.com/font.woff2' von der Herkunft 'https://yourwordpresssite.com' wurde durch die CORS-Richtlinie blockiert: Der Header 'Access-Control-Allow-Origin' ist in der angeforderten Ressource nicht vorhanden.

Lösungsmethode: Fügen Sie den folgenden Code in die functions.php-Datei Ihres Themes ein:

function add_cors_headers() { header("Access-Control-Allow-Origin: *"); } add_action('init', 'add_cors_headers');

Dies hilft dabei, die erforderlichen CORS-Header zu allen Antworten hinzuzufügen.

Beispiel 3: Verwendung eines CDN für statische Assets

Ihre WordPress-Website lädt Bilder, CSS- oder JavaScript-Dateien von einem CDN herunter, diese werden jedoch blockiert.

Fehlermeldung:

Der Zugriff auf das Skript unter 'https://cdn.example.com/script.js' von der Herkunft 'https://yourwordpresssite.com' wurde durch die CORS-Richtlinie blockiert: Der Header 'Access-Control-Allow-Origin' enthält mehrere Werte '*, *', aber nur einer ist zulässig.

Lösungsmethode: Wenn Sie Apache verwenden , können Sie Folgendes zu Ihrer Konfigurationsdatei hinzufügen:

<IfModule mod_headers.c>Header set Access-Control-Allow-Origin "*"</IfModule>

Wenn Sie Nginx verwenden , fügen Sie Folgendes zu Ihrer Konfiguration hinzu:

location / { add_header 'Access-Control-Allow-Origin' '*'; }

Beispiel 4: AJAX-Anfragen senden

Ihre WordPress-Website sendet AJAX-Anfragen an einen benutzerdefinierten REST-API-Endpunkt auf einer anderen Subdomain, diese werden jedoch blockiert.

Fehlermeldung:

Der Zugriff auf XMLHttpRequest unter 'https://api.yourwordpresssite.com/endpoint' von der Herkunft 'https://yourwordpresssite.com' wurde durch die CORS-Richtlinie blockiert: Die Antwort auf die Preflight-Anfrage besteht die Zugriffskontrolle nicht: Der Header 'Access-Control-Allow-Origin' ist in der angeforderten Ressource nicht vorhanden.

Lösungsmethode: Installieren und aktivieren Sie das Enable CORS-Pluginund konfigurieren Sie anschließend die Einstellungen so, dass Ihre Subdomain zugelassen wird.

Beispiel 5: Einbetten von Drittanbieter-Widgets

Ihre WordPress-Website bindet Widgets von anderen Domains mithilfe von iFrames ein, diese werden jedoch nicht geladen.

Fehlermeldung:

Der Zugriff auf die Ressource unter 'https://widget.example.com/' von der Herkunft 'https://yourwordpresssite.com' wurde durch die CORS-Richtlinie blockiert: Der Header 'Access-Control-Allow-Origin' ist in der angeforderten Ressource nicht vorhanden.

Lösungsmethode: Bitten Sie den Drittanbieter, Ihre Domain zum Access-Control-Allow-Origin- Header hinzuzufügen. Alternativ können Sie Folgendes in Ihre .htaccess-Datei:

<IfModule mod_headers.c>Header set Access-Control-Allow-Origin "*"</IfModule>

Wissenswertes: Was sind 404-Fehler? Wie behebe ich sie?

Weitere Methoden zur Behebung von CORS-Fehlern in WordPress

Hier sind einige zusätzliche Methoden, um CORS-Fehler zu beheben und die reibungslose Funktionalität Ihrer WordPress-Website zu gewährleisten.

• Nutzung von Cloudflare: Wenn Sie Cloudflare verwenden, können Sie über das Cloudflare-Dashboard benutzerdefinierte Regeln zur Verwaltung von CORS-Headern konfigurieren. Cloudflare Workers können außerdem verwendet werden, um Header hinzuzufügen oder zu ändern, während Anfragen das Netzwerk durchlaufen.

• Ändern der functions.php-Datei des Themes: Eine weitere Möglichkeit besteht darin, Code in die functions.php-Datei Ihres Themes einzufügen. Fügen Sie den folgenden Code ein, um CORS zu aktivieren:

function add_cors_headers() { header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS"); header("Access-Control-Allow-Headers: Content-Type, Authorization"); } add_action('init', 'add_cors_headers');

• Verwendung eines CORS-Proxys: Ein CORS-Proxy fungiert als Vermittlungsserver, der Anfragen zwischen Ihrer Website und der externen Ressource verarbeitet. Er fügt die erforderlichen CORS-Header hinzu, bevor er die Antwort an Ihre Website weiterleitet.

• Benutzerdefinierte Middleware: Implementieren Sie benutzerdefinierte Middleware auf Ihrem Server, um die erforderlichen CORS-Header zu den Antworten hinzuzufügen. Dies kann mithilfe serverseitiger Skriptsprachen wie PHP, Node.js oder Python erfolgen.

• Drittanbieterdienste: Einige Drittanbieterdienste und APIs bieten integrierte CORS-Unterstützung. Prüfen Sie die Dokumentation des jeweiligen Dienstes, um festzustellen, ob er Optionen zur Aktivierung von CORS für Ihre Domain bereitstellt.

• Kontaktaufnahme mit dem externen Serveranbieter: Wenden Sie sich an den Anbieter der externen Ressource und bitten Sie ihn, Ihre Domain in seinen Access-Control-Allow-Origin- Header aufzunehmen.

• Servereinstellungen konfigurieren: Sie können Ihre Servereinstellungen konfigurieren, um CORS-Fehler zu beheben. Wenn Sie beispielsweise Apache verwenden, können Sie Folgendes zu Ihrer Konfigurationsdatei hinzufügen:

<IfModule mod_headers.c>Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" Header set Access-Control-Allow-Headers "Content-Type, Authorization"</IfModule>

Für Nginxkönnen Sie Folgendes verwenden:

location / { if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization'; return 204; } add_header 'Access-Control-Allow-Origin' '*'; }

Wie kann man testen, ob das CORS-Problem behoben ist?

Aktualisieren Sie zunächst Ihre WordPress-Website, um zu sehen, ob die Änderungen wirksam werden. Manchmal reicht ein einfaches Neuladen aus, um festzustellen, ob der CORS-Fehler behoben ist.

• Überprüfen Sie die Browserkonsole: Öffnen Sie die Entwicklertools Ihres Browsers, wechseln Sie zum Tab „Konsole“ und suchen Sie nach CORS-bezogenen Fehlermeldungen. Falls keine angezeigt werden, ist das Problem möglicherweise behoben.

• Netzwerk-Anfragen prüfen: Wechseln Sie in den Entwicklertools zum Tab „Netzwerk“ und laden Sie die Seite neu. Prüfen Sie hier, ob die zuvor fehlgeschlagenen Anfragen behoben wurden. Klicken Sie außerdem auf diese Anfragen, um zu prüfen, ob die korrekten Header vorhanden sind.

• Funktionsprüfung: Prüfen Sie, ob die Funktionen, die aufgrund von CORS-Fehlern nicht funktionierten, wie z. B. API-Aufrufe, das Laden von Schriftarten oder AJAX-Anfragen, jetzt wie erwartet funktionieren.

Sie können auch Online-CORS-Prüftools verwenden, um zu überprüfen, ob die externen Ressourcen, auf die Sie zugreifen, korrekt konfiguriert sind, um ursprungsübergreifende Anfragen zuzulassen.

Lernen Sie: Wie Sie einen Usability-Test auf WordPress-Websites durchführen

Bewährte Verfahren für die CORS-Konfiguration

Durch die Befolgung dieser bewährten Methoden können Sie CORS sicher konfigurieren und sicherstellen, dass Ihre WordPress-Website geschützt bleibt und gleichzeitig reibungslos funktioniert.

• Bestimmte Ursprünge zulassen: Anstatt alle Ursprünge mit einem Platzhalter (*) zuzulassen, geben Sie die genauen Ursprünge an, die auf Ihre Ressourcen zugreifen dürfen. Dies erhöht die Sicherheit, indem der Zugriff auf vertrauenswürdige Domänen beschränkt wird.

• Beschränken Sie die zulässigen Methoden: Erlauben Sie nur die HTTP-Methoden, die Ihre Anwendung benötigt, wie GET, POST und OPTIONS. Dadurch wird das Risiko unautorisierter Aktionen minimiert.

• Beschränken Sie die Header: Erlauben Sie nur die spezifischen Header, die Ihre Anwendung benötigt. Dadurch wird die unnötige Offenlegung sensibler Informationen verhindert. Erlauben Sie beispielsweise „Content-Type“ und „Authorization“, falls diese erforderlich sind.

• Vorab-Anfragen verwenden: Stellen Sie sicher, dass für Anfragen, die Serverdaten beeinflussen könnten, Vorab-Anfragen verwendet werden. Dabei sendet der Browser eine OPTIONS- Anfrage, um die Berechtigungen zu prüfen, bevor die eigentliche Anfrage gesendet wird.

• Angemessene maximale Speicherdauer festlegen: Definieren Sie den Access-Control-Max-Age- Header, um festzulegen, wie lange die Ergebnisse einer Preflight-Anfrage zwischengespeichert werden dürfen. Dadurch wird die Anzahl der vom Server verarbeiteten Preflight-Anfragen reduziert und die Leistung verbessert.

Abschließend sollten Sie Ihre CORS-Konfiguration regelmäßig überprüfen und überwachen, um sicherzustellen, dass sie Ihren Sicherheits- und Funktionsanforderungen entspricht. Passen Sie die Einstellungen an, sobald sich Ihre Anwendung weiterentwickelt.

Weiterführende Informationen: WordPress-Datenbank-Performanceoptimierung

Einpacken

Die Behebung von CORS-Fehlern in WordPress ist unerlässlich, um die Funktionalität und Benutzerfreundlichkeit Ihrer Website zu gewährleisten.

Indem Sie gängige Szenarien verstehen und die entsprechenden Lösungsansätze anwenden, können Sie diese Probleme effektiv beheben.

Sollten Sie jedoch weiterhin auf Probleme stoßen oder die Lösungen zu komplex erscheinen, zögern Sie nicht, professionelle Hilfe in Anspruch zu nehmen.

Professionelle WordPress-Supportdienste bieten fachkundige Unterstützung und gewährleisten so einen reibungslosen Betrieb Ihrer Website ohne CORS-bedingte Störungen.

Häufig gestellte Fragen zu WordPress-CORS-Fehlern