CORS en Express: solucionar el error CORS (con y sin cors)

Un error CORS ("No 'Access-Control-Allow-Origin' header is present") significa que una página web de un origen, como http://localhost:5173, llamó a tu API en otro origen, y el navegador no dejó que la página leyera la respuesta porque la respuesta no decía que ese origen estuviera permitido. La solución está en el servidor: envía Access-Control-Allow-Origin con el origen de la página, y responde a la petición preflight OPTIONS del navegador con los métodos y headers que aceptas. En Express son unas pocas líneas de middleware, o app.use(cors()) del paquete 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);

La respuesta es la lista de productos, y su pestaña Headers muestra access-control-allow-origin: https://app.example.com: una página de ese origen puede leerla. Ahora envía OPTIONS /api/products/1 con los headers Origin: https://app.example.com y Access-Control-Request-Method: PUT. Ese es el preflight que envía un navegador antes de un PUT, y la respuesta es 204 con los métodos y headers permitidos y sin body.

Qué comprueba el navegador

Las páginas del mismo origen no necesitan nada. Para una petición entre orígenes, el navegador lee estos headers de la respuesta:

Un GET simple o un POST tipo formulario va directo al servidor, y el navegador comprueba Access-Control-Allow-Origin en la respuesta. El servidor ejecuta la petición de todas formas; CORS solo decide si la página ve el resultado. Una petición con un body JSON, un header Authorization o un método como PUT o DELETE va precedida de una petición preflight OPTIONS, y la petición real solo se envía si la respuesta del preflight lo permite. Por eso un middleware CORS tiene que responder a OPTIONS antes de que se ejecute cualquier ruta o comprobación de auth.

Permitir varios orígenes, con credenciales

Access-Control-Allow-Origin contiene un origen o *, nunca una lista. Para permitir varios, compara el header Origin de la petición con una lista de permitidos y devuélvelo cuando coincida:

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

La primera petición no tiene header Origin, como una llamada desde curl o desde una página del mismo origen, así que recibe {"origin":null} y ningún header CORS. Envía GET /api/me con el header Origin: http://localhost:5173 y la pestaña Headers muestra ese origen devuelto más access-control-allow-credentials: true. Cambia el header a Origin: https://evil.example y los dos headers CORS desaparecen: el servidor sigue respondiendo, pero un navegador impediría que la página lo leyera. Access-Control-Allow-Credentials: true permite que la página envíe cookies (con fetch(url, { credentials: 'include' })), y los navegadores lo rechazan junto con *, así que las credenciales siempre necesitan el origen exacto.

El paquete cors

El paquete cors hace el mismo trabajo con opciones. Instálalo con 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);

Llamado sin opciones, cors() envía Access-Control-Allow-Origin: * y responde a todos los preflight. Usa * solo para datos públicos que no necesitan login.

Errores comunes

Añadir CORS después de las rutas o después de un middleware de auth. La petición preflight OPTIONS no lleva header Authorization, así que una comprobación de auth puesta antes la responde con 401 y el navegador muestra un error CORS. Registra primero el middleware CORS.

Poner * con credenciales. Los navegadores rechazan la respuesta. Devuelve el origen concreto.

Intentar arreglar CORS en el frontend. Opciones de la petición como mode: 'no-cors' no quitan la restricción; te dan una respuesta opaca que no puedes leer. Solo lo arreglan los headers del servidor.

Para ver cómo funcionan app.use() y el orden del middleware, consulta middleware en Express.