Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) 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 que se realizan desde un script en ejecución en un dominio hacia un servidor ubicado en un dominio, puerto o protocolo diferente.

Cuando desarrollas una API backend con Node.js y Express y tratas de consumirla desde un frontend alojado en otra dirección (por ejemplo, React ejecutándose en http://localhost:3000 y tu API en http://localhost:5000), el navegador bloquea la respuesta por defecto, arrojando el temido error en la consola.

Causas principales del bloqueo CORS en desarrollo web

• Falta de cabeceras HTTP específicas en las respuestas del servidor que indiquen al navegador que se permite el acceso desde otros orígenes.
• Intentar realizar solicitudes tipo POST, PUT o DELETE sin haber configurado correctamente el acceso preflight (peticiones OPTIONS).
• Diferencias de puertos, dominios o protocolos entre el cliente y el servidor.

Método 1: Instalar y configurar el middleware CORS oficial en Express

La forma más limpia, rápida 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, server.js o app.js).
4. Importa el paquete e intégralo como middleware antes de definir tus rutas:

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

// Habilitar CORS para todas las rutas y orígenes
app.use(cors());

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

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

Método 2: Configurar CORS para dominios específicos (Producción)

Permitir el acceso desde cualquier origen (utilizando app.use(cors())) puede representar un riesgo de seguridad en entornos de producción. Lo ideal es restringir el acceso únicamente a los dominios autorizados.

1. Modifica la implementación del middleware añadiendo un objeto de configuración con la propiedad origin.
2. Define la URL exacta de tu frontend o una lista blanca de dominios permitidos:

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 la política CORS'));
}
}
};

app.use(cors(corsOptions));

Siguiendo estos pasos, podrás eliminar por completo los errores de origen cruzado en tu API de Node.js y asegurar una comunicación fluida y segura entre tu backend y frontend.