Cómo Solucionar el Error de CORS (Cross-Origin Resource Sharing) en Node.js y Express Paso a Paso

Introducción al Error de CORS en el Desarrollo Backend

Durante el desarrollo web moderno, es muy común separar el frontend (por ejemplo, React o Vue) del backend (Node.js con Express). Al intentar conectar ambos entornos alojados en diferentes puertos o dominios, los navegadores bloquean las peticiones mostrando el temido error de CORS (Cross-Origin Resource Sharing). Este problema de seguridad impide que tu aplicación cliente consuma los recursos de tu API correctamente.

Principales Causas del Bloqueo CORS

El mecanismo de seguridad de los navegadores modernos restringe las solicitudes HTTP de fuentes cruzadas por defecto. Las causas más frecuentes de este error incluyen:

• El servidor backend no incluye las cabeceras HTTP necesarias (como Access-Control-Allow-Origin).
• Se intenta realizar una petición desde un origen (dominio, protocolo o puerto) no autorizado explícitamente por el servidor.
• El uso de métodos HTTP no permitidos (como PUT o DELETE) sin la debida pre-verificación (petición OPTIONS).

Método 1: Instalar y Configurar el Middleware CORS Oficial

La forma más rápida, segura y recomendada de solucionar este problema en Express es utilizando el paquete oficial cors.

1. Abre tu terminal en la raíz del proyecto Node.js.
2. Instala el paquete ejecutando el comando: npm install cors
3. Abre tu archivo principal del servidor (usualmente app.js o server.js).
4. Importa el paquete e instálalo como middleware global antes de tus rutas:

const cors = require('cors');

const app = express();

app.use(cors());

Método 2: Configurar Orígenes Específicos para Mayor Seguridad

Si tu aplicación está en producción, permitir el acceso a cualquier dominio (con cors() genérico) puede ser un riesgo de seguridad. Debes restringir el acceso únicamente a tu frontend.

1. Define una lista blanca de orígenes permitidos en tu código.
2. Configura el middleware de CORS pasando un objeto de opciones:

const whitelist = ['httpstusitio.com', 'http://localhost:3000'];

const corsOptions = { delegate: (req, callback) => { let corsOptions; if (whitelist.indexOf(req.header('Origin')) !== -1) { corsOptions = { origin: true } } else { corsOptions = { origin: false } } callback(null, corsOptions); } };

app.use(cors(corsOptions));

Método 3: Solución Manual Mediante Cabeceras HTTP Personalizadas

Si no deseas instalar dependencias externas, puedes configurar manualmente los encabezados de respuesta para cada solicitud utilizando un middleware personalizado en Express.

1. Crea un middleware global en tu archivo de configuración de Express:

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

Con cualquiera de estos métodos aplicados correctamente, el error de CORS desaparecerá y tu frontend podrá comunicarse sin problemas con tu API en Node.js y Express.