Was ist CORS und wie gehen Sie damit in Node um?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) ist ein Browser-Sicherheitsmechanismus, der steuert, ob eine Webseite von einer **Origin** Anfragen an einen Server unter einer **anderen Origin** stellen darf. Standardmäßig blockieren Browser Cross-Origin-Anfragen; der Server muss diese explizit über Response-Header zulassen.

## Same-Origin-Policy und das Problem

```text
Origin = scheme + host + port. These are DIFFERENT origins:
  https://app.example.com   →  https://api.example.com   (different host)
  http://localhost:3000     →  http://localhost:4000      (different port)

Browser blocks the cross-origin request UNLESS the server sends CORS headers allowing it.
```

Also ist eine React-App auf `localhost:3000`, die eine API auf `localhost:4000` aufruft, Cross-Origin — der Browser blockiert dies, es sei denn, die API erlaubt es.

## Die wichtigsten Response-Header

```text
Access-Control-Allow-Origin: https://app.example.com   ← who is allowed
Access-Control-Allow-Methods: GET, POST, PUT, DELETE   ← allowed methods
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true                 ← allow cookies/auth
```

Der Server steuert den Zugriff durch das Versenden dieser Header. Der Browser liest sie und entscheidet, ob die Seite die Response sehen darf.

## Warum es wichtig ist

CORS ist einer der häufigsten Stolpersteine in der Webentwicklung — fast jedes Front-End-zu-API-Setup trifft auf CORS (besonders in der lokalen Entwicklung mit verschiedenen Ports).

Zu verstehen, *warum* es existiert (Browser Same-Origin-Sicherheit), wie der Server es über Header zulässt, wie man es sicher konfiguriert (Whitelist Origins, vorsichtige Anmeldedatenverwaltung) und die entscheidende Tatsache, dass es ein *Browser*-Mechanismus ist (nicht API-Autorisierung), ist wesentlich für die korrekte und sichere Verbindung von Front-Ends mit Node-APIs, ohne blockiert zu werden oder den Server übermaßig freizulegen.

## CORS in Express behandeln

```js
import cors from "cors";

// ❌ allow everything — convenient but insecure for credentialed/private APIs
app.use(cors());

// ✅ restrict to specific trusted origins
app.use(cors({
  origin: ["https://app.example.com", "http://localhost:3000"], // allowlist
  methods: ["GET", "POST", "PUT", "DELETE"],
  credentials: true, // allow cookies — REQUIRES a specific origin (not "*")
}));
```

Die `cors`-Middleware setzt die Header für Sie. Für die Produktion **beschränken Sie `origin` auf eine Whitelist** statt `*` — und beachten Sie, dass das Zulassen von Anmeldedaten (`credentials: true`) mit dem Wildcard `*` nicht kompatibel ist.

## Preflight-Anfragen

```text
For "non-simple" requests (PUT/DELETE, custom headers, JSON), the browser first
sends an OPTIONS "preflight" request to check permissions. The cors middleware
handles responding to it automatically.
```

## Häufiger Irrglaube

```text
CORS is enforced by the BROWSER, not the server. It does NOT protect your API
from non-browser clients (curl, Postman, other servers) — those ignore CORS.
It only governs what browser JavaScript on other origins can do.
```