CORS in Express: CORS-Fehler beheben (mit und ohne cors)

Ein CORS-Fehler ("No 'Access-Control-Allow-Origin' header is present") heißt, dass eine Webseite auf einem Origin, etwa http://localhost:5173, deine API auf einem anderen Origin aufgerufen hat und der Browser der Seite das Lesen der Antwort verweigert hat, weil die Antwort diesen Origin nicht erlaubt hat. Die Lösung liegt auf dem Server: Sende Access-Control-Allow-Origin mit dem Origin der Seite und beantworte die Preflight-OPTIONS-Anfrage des Browsers mit den Methoden und Headern, die du akzeptierst. In Express sind das ein paar Zeilen Middleware oder app.use(cors()) aus dem Paket cors.

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

const ALLOWED_ORIGIN = 'https://app.example.com';

function cors(req, res, next) {
    res.set('Access-Control-Allow-Origin', ALLOWED_ORIGIN);
    res.set('Vary', 'Origin');
    if (req.method === 'OPTIONS') {
        res.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
        res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
        res.set('Access-Control-Max-Age', '600');
        return res.sendStatus(204);
    }
    next();
}

app.use(cors);

app.get('/api/products', (req, res) => {
    res.json([{ id: 1, name: 'Lamp' }]);
});

app.put('/api/products/:id', (req, res) => {
    res.json({ updated: req.params.id });
});

// GET /api/products
app.listen(3000);

Die Antwort ist die Produktliste, und ihr Headers-Tab zeigt access-control-allow-origin: https://app.example.com: Eine Seite auf diesem Origin darf sie lesen. Sende jetzt OPTIONS /api/products/1 mit den Headern Origin: https://app.example.com und Access-Control-Request-Method: PUT. Das ist der Preflight, den ein Browser vor einem PUT schickt, und die Antwort ist 204 mit den erlaubten Methoden und Headern und ohne Body.

Was der Browser prüft

Seiten mit demselben Origin brauchen nichts. Bei einer Cross-Origin-Anfrage liest der Browser diese Response-Header:

Ein einfacher GET oder ein POST wie aus einem Formular geht direkt an den Server, und der Browser prüft Access-Control-Allow-Origin in der Antwort. Der Server führt die Anfrage trotzdem aus; CORS entscheidet nur, ob die Seite das Ergebnis sieht. Vor einer Anfrage mit JSON-Body, einem Authorization-Header oder einer Methode wie PUT oder DELETE kommt eine Preflight-OPTIONS-Anfrage, und die eigentliche Anfrage wird nur gesendet, wenn die Preflight-Antwort sie erlaubt. Deshalb muss eine CORS-Middleware OPTIONS beantworten, bevor irgendeine Route oder Auth-Prüfung läuft.

Mehrere Origins erlauben, mit Credentials

Access-Control-Allow-Origin enthält einen Origin oder *, nie eine Liste. Um mehrere zu erlauben, vergleich den Origin-Header der Anfrage mit einer Allow-List und schick ihn zurück, wenn er passt:

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

const allowed = new Set(['https://app.example.com', 'http://localhost:5173']);

app.use((req, res, next) => {
    const origin = req.get('origin');
    if (origin && allowed.has(origin)) {
        res.set('Access-Control-Allow-Origin', origin);
        res.set('Access-Control-Allow-Credentials', 'true');
    }
    res.set('Vary', 'Origin');
    if (req.method === 'OPTIONS') {
        res.set('Access-Control-Allow-Methods', 'GET, POST');
        res.set('Access-Control-Allow-Headers', 'Content-Type');
        return res.sendStatus(204);
    }
    next();
});

app.get('/api/me', (req, res) => {
    res.json({ origin: req.get('origin') ?? null });
});

app.listen(3000);

Die erste Anfrage hat keinen Origin-Header, wie ein Aufruf aus curl oder von einer Seite mit demselben Origin, deshalb bekommt sie {"origin":null} und keine CORS-Header. Sende GET /api/me mit dem Header Origin: http://localhost:5173, und der Headers-Tab zeigt diesen Origin zurückgespiegelt plus access-control-allow-credentials: true. Ändere den Header in Origin: https://evil.example, und beide CORS-Header verschwinden: Der Server antwortet weiterhin, aber ein Browser würde der Seite das Lesen verweigern. Access-Control-Allow-Credentials: true erlaubt der Seite, Cookies zu senden (mit fetch(url, { credentials: 'include' })), und Browser lehnen es zusammen mit * ab, Credentials brauchen also immer den genauen Origin.

Das Paket cors

Das Paket cors macht dieselbe Arbeit über Optionen. Installier es mit npm install cors:

const cors = require('cors');

// Any origin, no cookies: fine for a public read-only API.
app.use(cors());

// Only your frontend, with cookies.
app.use(cors({
    origin: ['https://app.example.com', 'http://localhost:5173'],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
}));

// One route only.
app.get('/api/public', cors(), handler);

Ohne Optionen sendet cors() Access-Control-Allow-Origin: * und beantwortet jeden Preflight. Nimm * nur für öffentliche Daten, für die kein Login nötig ist.

Häufige Fehler

CORS nach den Routen oder nach einer Auth-Middleware einbinden. Die Preflight-OPTIONS-Anfrage hat keinen Authorization-Header, eine vorher platzierte Auth-Prüfung beantwortet sie also mit 401, und der Browser meldet einen CORS-Fehler. Registrier die CORS-Middleware zuerst.

* zusammen mit Credentials setzen. Browser lehnen die Antwort ab. Spiegle stattdessen den konkreten Origin zurück.

CORS im Frontend beheben wollen. Request-Optionen wie mode: 'no-cors' heben die Einschränkung nicht auf; sie liefern eine undurchsichtige Antwort, die du nicht lesen kannst. Nur die Header des Servers lösen das Problem.

Wie app.use() und die Reihenfolge von Middleware funktionieren, steht unter Express Middleware.