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

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

El error CORS (Cross-Origin Resource Sharing o Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad implementado por los navegadores web. Este mecanismo restringe las solicitudes HTTP realizadas desde scripts hacia un dominio diferente al que sirvió la página original. Cuando desarrollas una API backend con Node.js y Express y tratas de consumirla desde un frontend alojado en otro puerto o dominio (por ejemplo, React en el puerto 3000 y Node.js en el 5000), el navegador bloquea la respuesta por defecto si no detecta los permisos adecuados.

Causas principales del bloqueo CORS

• Ausencia de los encabezados HTTP (Headers) correspondientes en las respuestas del servidor.
• Configuración restrictiva que no permite el origen (Origin) desde donde se realiza la petición del cliente.
• Intentos de enviar credenciales (como cookies o tokens de autorización) sin la habilitación explícita en el servidor.

Método 1: Solucionar CORS usando el paquete oficial 'cors' en Express

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

1. Abre tu terminal y ubícate en la raíz de tu proyecto backend.
2. Instala el paquete ejecutando el siguiente comando: npm install cors
3. Abre tu archivo principal de configuración (usualmente index.js o app.js).
4. Importa el paquete y utilízalo antes de declarar tus rutas de la siguiente manera:

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
// Tus rutas aquí
app.listen(5000, () => console.log('Servidor corriendo'));

Método 2: Configurar opciones específicas de CORS para mayor seguridad

Si tu aplicación requiere restricciones y solo deseas permitir peticiones desde un dominio frontend específico (por ejemplo, tu sitio en producción), puedes pasar un objeto de configuración al middleware.

1. Define la lista blanca de orígenes permitidos en tu archivo principal.
2. Configura las opciones del middleware especificando el origen, métodos permitidos y credenciales:

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

Método 3: Configurar los Headers CORS de forma manual sin librerías externas

Si por alguna razón no puedes instalar dependencias de terceros en tu proyecto Node.js puro, puedes configurar los encabezados HTTP de forma manual mediante un middleware personalizado.

1. Crea un middleware global al inicio de tus rutas.
2. Añade los encabezados necesarios utilizando el objeto res de Express:

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