Lösung von "CORS error" und häufigen Access-Control-Allow-Origin-Problemen: Ein vollständiger Leitfaden

Wenn Sie jemals eine Webanwendung erstellt haben, die Anfragen an eine API auf einer anderen Domain sendet, sind Sie mit Sicherheit auf den gefürchteten "CORS error" gestoßen. In Ihrer Browserkonsole sieht das normalerweise so aus:

Access to fetch at 'https://api.example.com' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In diesem Leitfaden erklären wir genau, was CORS ist, warum es existiert und wie Sie diese Fehler endgültig beheben können.

1. Häufige CORS error Fehlermeldungen

Sie werden diese Fehler primär in den Entwicklertools Ihres Browsers sehen (Konsole oder Netzwerk-Tab):

blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present ...
The 'Access-Control-Allow-Origin' header contains multiple values ...
Response to preflight request doesn't pass access control check ...
Method NOT ALLOWED ... (wenn die HTTP-Methode wie POST oder DELETE durch CORS nicht erlaubt ist)

2. Was ist CORS?

CORS (Cross-Origin Resource Sharing) ist eine Sicherheitsfunktion, die von Browsern implementiert wird. Sie verhindert, dass eine bösartige Website ohne Erlaubnis Anfragen an eine andere Domain (wie Ihre Bank oder Ihre private API) sendet.

Standardmäßig folgen Browser der Same-Origin-Policy. Das bedeutet, dass ein Skript auf a.com nur Daten von a.com anfordern kann. CORS ist der Mechanismus, der es a.com ermöglicht, sicher Daten von b.com anzufordern, wenn b.com dies explizit erlaubt.

3. Hauptursachen und Lösungen

3.1 Fehlender "Access-Control-Allow-Origin" Header

Dies ist der häufigste Fehler. Er bedeutet, dass der Server, von dem Sie Daten anfordern, dem Browser nicht mitgeteilt hat, dass Ihre Domain auf die Ressource zugreifen darf.

Die Lösung: Die Fehlerbehebung MUSS auf der Serverseite erfolgen. Sie müssen den Header Access-Control-Allow-Origin zur Antwort hinzufügen.

Für öffentliche APIs: Setzen Sie ihn auf * (alle erlauben).
Für private APIs: Setzen Sie ihn auf Ihre spezifische Domain (z. B. https://myapp.com).

3.2 CORS preflight Fehler

Für "komplexe" Anfragen (wie solche mit benutzerdefinierten Headern oder Methoden wie PUT/DELETE) sendet der Browser zuerst eine automatische OPTIONS-Anfrage. Dies wird als Preflight-Anfrage bezeichnet.

Der Fehler: Response to preflight request doesn't pass access control check.

Die Lösung: Stellen Sie sicher, dass Ihr Server OPTIONS-Anfragen verarbeitet und einen Status 200 OK oder 204 No Content mit den korrekten CORS-Headern zurückgibt:

Access-Control-Allow-Origin
Access-Control-Allow-Methods (z. B. GET, POST, OPTIONS, PUT, DELETE)
Access-Control-Allow-Headers (z. B. Content-Type, Authorization)

3.3 "Access-Control-Allow-Credentials"

Wenn Sie Cookies oder Autorisierungs-Header mit Ihrer Anfrage senden (withCredentials: true), werden die CORS-Regeln strenger.

Der Fehler: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Die Lösung:

Sie können * nicht für Access-Control-Allow-Origin verwenden. Sie müssen die exakte Origin angeben.
Sie müssen außerdem den Header hinzufügen: Access-Control-Allow-Credentials: true.

4. Wie man CORS in verschiedenen Umgebungen behebt

4.1 Node.js (Express)

Der einfachste Weg ist die Verwendung der cors-Middleware:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  origin: 'https://myapp.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  credentials: true
}));

4.2 Nginx

Fügen Sie diese Zeilen zu Ihrem Server- oder Location-Block hinzu:

add_header 'Access-Control-Allow-Origin' 'https://myapp.com' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;

if ($request_method = 'OPTIONS') {
    return 204;
}

4.3 Python (Flask)

Verwenden Sie die Erweiterung flask-cors:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins=["https://myapp.com"])

5. FAQ: Häufig gestellte Fragen

F: Kann ich einen CORS error vom Frontend (JavaScript) aus beheben?

A: Nein. CORS ist eine serverseitige Sicherheitsrichtlinie, die vom Browser erzwungen wird. Sie können sie in Ihrem JavaScript-Code nicht "umgehen". Wenn Sie den Server nicht kontrollieren, müssen Sie einen Proxy Server verwenden, um die Daten für Sie abzurufen.

F: Warum sehe ich CORS-Fehler nur im Browser und nicht in Postman?

A: Postman ist eine eigenständige Anwendung, kein Webbrowser. Es erzwingt weder die Same-Origin-Policy noch CORS-Regeln. Nur Webbrowser (Chrome, Firefox usw.) erzwingen CORS.

F: Was ist das Risiko, wenn man Access-Control-Allow-Origin auf "*" setzt?

A: Für öffentliche Daten besteht kein Risiko. Für eine API, die jedoch Benutzerdaten verarbeitet oder eine Authentifizierung erfordert, ermöglicht das Setzen auf * jeder Website, Anfragen im Namen eines angemeldeten Benutzers zu stellen, was potenziell zu Datendiebstahl führen kann.

6. Übersichtstabelle der CORS-Header

Header	Beschreibung
`Access-Control-Allow-Origin`	Gibt an, welche Domains auf die Ressource zugreifen dürfen.
`Access-Control-Allow-Methods`	Gibt an, welche HTTP-Methoden (GET, POST usw.) erlaubt sind.
`Access-Control-Allow-Headers`	Gibt an, welche benutzerdefinierten Header gesendet werden können.
`Access-Control-Allow-Credentials`	Gibt an, ob die Antwort geteilt werden kann, wenn das `credentials`-Flag auf true gesetzt ist.
`Access-Control-Max-Age`	Gibt an, wie lange die Ergebnisse einer Preflight-Anfrage zwischengespeichert werden können.

Lösung von 'CORS error' und häufigen Access-Control-Allow-Origin-Problemen