CORS w Express: jak naprawić błąd CORS (z cors i bez)

Błąd CORS ("No 'Access-Control-Allow-Origin' header is present") oznacza, że strona z jednego originu, np. http://localhost:5173, wywołała twoje API na innym originie, a przeglądarka nie pozwoliła stronie odczytać odpowiedzi, bo odpowiedź nie mówiła, że ten origin jest dozwolony. Naprawa jest po stronie serwera: wyślij Access-Control-Allow-Origin z originem strony i odpowiedz na preflight OPTIONS przeglądarki metodami i nagłówkami, które akceptujesz. W Express to kilka linii middleware albo app.use(cors()) z pakietu 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);

Odpowiedź to lista produktów, a jej zakładka Headers pokazuje access-control-allow-origin: https://app.example.com: strona z tego originu może ją odczytać. Teraz wyślij OPTIONS /api/products/1 z nagłówkami Origin: https://app.example.com i Access-Control-Request-Method: PUT. To preflight, który przeglądarka wysyła przed PUT, a odpowiedź to 204 z dozwolonymi metodami i nagłówkami, bez body.

Co sprawdza przeglądarka

Strony z tego samego originu niczego nie potrzebują. Przy żądaniu cross-origin przeglądarka czyta te nagłówki odpowiedzi:

Prosty GET albo POST jak z formularza trafia prosto do serwera, a przeglądarka sprawdza Access-Control-Allow-Origin w odpowiedzi. Serwer i tak wykonuje żądanie; CORS decyduje tylko o tym, czy strona zobaczy wynik. Żądanie z body w JSON, nagłówkiem Authorization albo metodą taką jak PUT lub DELETE poprzedza preflight OPTIONS, a właściwe żądanie idzie tylko wtedy, gdy odpowiedź na preflight na to pozwala. Dlatego middleware CORS musi odpowiedzieć na OPTIONS, zanim zadziała jakakolwiek trasa czy sprawdzanie autoryzacji.

Kilka originów i credentials

Access-Control-Allow-Origin zawiera jeden origin albo *, nigdy listę. Żeby dopuścić kilka, porównaj nagłówek Origin żądania z listą dozwolonych i odeślij go, gdy pasuje:

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);

Pierwsze żądanie nie ma nagłówka Origin, tak jak wywołanie z curl albo ze strony z tego samego originu, więc dostaje {"origin":null} i żadnych nagłówków CORS. Wyślij GET /api/me z nagłówkiem Origin: http://localhost:5173, a zakładka Headers pokaże ten origin odesłany z powrotem plus access-control-allow-credentials: true. Zmień nagłówek na Origin: https://evil.example i oba nagłówki CORS znikną: serwer nadal odpowiada, ale przeglądarka nie pozwoliłaby stronie odczytać odpowiedzi. Access-Control-Allow-Credentials: true pozwala stronie wysyłać ciasteczka (przez fetch(url, { credentials: 'include' })), a przeglądarki odrzucają to razem z *, więc credentials zawsze wymagają dokładnego originu.

Pakiet cors

Pakiet cors robi to samo przez opcje. Zainstaluj go przez 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);

Wywołany bez opcji cors() wysyła Access-Control-Allow-Origin: * i odpowiada na każdy preflight. Używaj * tylko dla publicznych danych, które nie wymagają logowania.

Częste błędy

Dodawanie CORS po trasach albo po middleware autoryzacji. Preflight OPTIONS nie ma nagłówka Authorization, więc sprawdzanie autoryzacji ustawione wcześniej odpowiada 401, a przeglądarka zgłasza błąd CORS. Zarejestruj middleware CORS jako pierwszy.

Ustawianie * razem z credentials. Przeglądarki odrzucają taką odpowiedź. Odsyłaj konkretny origin.

Naprawianie CORS we frontendzie. Opcje żądania takie jak mode: 'no-cors' nie znoszą ograniczenia; dają nieprzezroczystą odpowiedź, której nie odczytasz. Pomagają tylko nagłówki z serwera.

Jak działa app.use() i kolejność middleware, przeczytasz w Express middleware.