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

Introducción al Error de CORS en Aplicaciones Web

Cuando desarrollas aplicaciones web modernas utilizando una arquitectura desacoplada, es muy común encontrarse con el temido error de CORS (Cross-Origin Resource Sharing) en la consola del navegador. Este mecanismo de seguridad implementado por los navegadores web bloquea las peticiones HTTP realizadas desde un dominio, puerto o protocolo distinto al del servidor backend.

Causas Principales del Bloqueo CORS

El error se produce principalmente debido a:

• El frontend se ejecuta en un origen (ejemplo: http://localhost:3000) y el backend en otro diferente (ejemplo: http://localhost:5000).
• Falta de los encabezados HTTP requeridos por el navegador en la respuesta del servidor.
• Configuración restrictiva que no permite métodos HTTP específicos como POST, PUT o DELETE.

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

La forma más recomendada y limpia de solucionar este problema en Node.js utilizando Express es mediante el uso del middleware 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 lo general app.js o server.js).
4. Importa y habilita el middleware antes de definir 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 va a pasar a producción, dejar CORS abierto a cualquier origen (*) puede representar un riesgo de seguridad. Es mejor limitar el acceso únicamente a los dominios confiables.

1. Modifica la inicialización del middleware CORS en tu archivo de servidor de la siguiente manera:

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));
2. Guarda los cambios y reinicia tu servidor Node.js para aplicar la nueva política de seguridad.