Cómo Solucionar el Error CORS en Node.js y Express Paso a Paso

Introducción al Error CORS en Node.js

Cuando desarrollamos aplicaciones web modernas donde el frontend (ej. React, Vue o Angular) se comunica con un backend independiente en Node.js y Express, es muy común encontrarse con el temido error de CORS (Cross-Origin Resource Sharing). Este problema ocurre porque los navegadores web implementan una política de seguridad de mismo origen por defecto.

Cuando intentas realizar una petición fetch o axios desde un dominio o puerto distinto al de tu servidor, el navegador bloquea la respuesta y muestra un mensaje en la consola similar a: Access to fetch at 'http://localhost:3000/api' from origin 'http://localhost:5173' has been blocked by CORS policy.

Causas Principales del Error CORS

• El servidor backend no incluye las cabeceras HTTP necesarias (como Access-Control-Allow-Origin).
• Intentar consumir una API desde un puerto o protocolo diferente sin autorización previa del servidor.
• Falta de configuración del middleware de CORS en frameworks como Express.

Método 1: Instalar y Configurar el Paquete CORS en Express

La forma más rápida, estandarizada y recomendada de solucionar este problema en una aplicación de Node.js con Express es utilizando el paquete oficial cors.

1. Abre tu terminal en la raíz del proyecto backend.
2. Instala el paquete ejecutando el siguiente comando:
   npm install cors
3. Abre tu archivo principal del servidor (por ejemplo, app.js o server.js).
4. Importa y habilita el middleware antes de definir tus rutas de la siguiente manera:

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

// Habilitar CORS para todas las peticiones
app.use(cors());

app.get('/api/data', (req, res) => {
res.json({ message: '¡CORS solucionado con éxito!' });
});

app.listen(3000, () => console.log('Servidor corriendo en puerto 3000'));

Método 2: Configurar CORS para Orígenes Específicos (Entorno de Producción)

Habilitar CORS globalmente con app.use(cors()) es útil para desarrollo, pero en producción puede representar un riesgo de seguridad si permites el acceso a cualquier dominio. Es mejor restringirlo a tu dominio frontend específico.

1. Modifica la inicialización del middleware CORS pasando un objeto de configuración con la propiedad origin.
2. Define la URL exacta de tu aplicación cliente.

const whitelist = ['https://tudominiofrontend.com'];
const corsOptions = {
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1 || !origin) {
callback(null, true);
} else {
callback(new Error('Bloqueado por la política de CORS'));
}
}
};

app.use(cors(corsOptions));

Método 3: Manejo Manual de Cabeceras HTTP (Sin Librerías)

Si por alguna razón no deseas instalar dependencias externas, puedes configurar las cabeceras HTTP manualmente creando un middleware personalizado en Express.

1. Añade el siguiente código antes de tus rutas para interceptar las peticiones y añadir las cabeceras requeridas:

app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});

Con cualquiera de estos métodos, el error de CORS desaparecerá y podrás comunicar tu frontend y backend sin inconvenientes.