Cómo Solucionar el Error CORS en Node.js y Express de Forma Definitiva

¿Qué es el Error CORS y por qué ocurre en Node.js?

El error de CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web que restringe las solicitudes HTTP realizadas desde un origen (dominio, protocolo o puerto) diferente al del servidor de la API. Cuando desarrollas aplicaciones modernas separando el backend en Node.js/Express y el frontend en React, Vue o Angular, es muy común encontrarse con este bloqueo en la consola del navegador.

Causas Principales del Bloqueo CORS en Express

Las causas más habituales por las que tu servidor rechaza las peticiones son:

• Falta de configuración de cabeceras HTTP específicas para permitir orígenes cruzados.
• Intento de realizar peticiones con credenciales (cookies o tokens de autorización) sin habilitarlas explícitamente.
• Uso de métodos HTTP (como PUT, DELETE o cabeceras personalizadas) sin la pre-aprobación del método OPTIONS (solicitudes preflight).

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

La forma más rápida, limpia y recomendada de solucionar este problema en una aplicación de Express es utilizando el middleware oficial cors.

1. Abre tu terminal en la raíz del proyecto backend y ejecuta el comando de instalación: npm install cors
2. Abre tu archivo principal de servidor (ej. app.js o server.js).
3. Importa el paquete e inicialízalo antes de declarar tus rutas:

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

Método 2: Configurar CORS para Orígenes Específicos y Producción

Habilitar CORS para cualquier origen (*) puede representar un riesgo de seguridad en entornos de producción. Es una buena práctica restringir el acceso únicamente a los dominios autorizados.

1. Modifica la implementación del middleware añadiendo un objeto de opciones:

const whitelist = ['https://tudominio.com', 'http://localhost:3000'];
const corsOptions = {
delegate(origin, callback) {
if (whitelist.indexOf(origin) !== -1 || !origin) {
callback(null, true);
} else {
callback(new Error('Bloqueado por la política CORS'));
}
}
};
app.use(cors(corsOptions));

Método 3: Solución Manual mediante Cabeceras HTTP

Si prefieres no utilizar paquetes de terceros, puedes configurar manualmente las cabeceras de respuesta creando un middleware personalizado en Express.

1. Añade el siguiente código antes de tus rutas:

app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
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();
});