Introducción al Error de CORS en Node.js y Express
El error de CORS (Cross-Origin Resource Sharing) es uno de los problemas más comunes a los que nos enfrentamos los desarrolladores web al conectar nuestro frontend (por ejemplo, React, Vue o Angular) con una API backend construida en Node.js usando Express. Este mecanismo de seguridad del navegador bloquea las solicitudes HTTP realizadas desde un origen diferente al del servidor, a menos que el servidor indique explícitamente qué dominios tienen permiso.
Si al intentar consumir tu API recibes un mensaje en la consola del navegador como Access to XMLHttpRequest at 'http://localhost:3000/api' from origin 'http://localhost:5173' has been blocked by CORS policy, no te preocupes. En este artículo te mostraremos las causas y cómo solucionarlo definitivamente.
Causas Principales del Bloqueo CORS
Las causas fundamentales por las que se activa la política de seguridad de CORS en el desarrollo moderno incluyen:
- El frontend y el backend corren en puertos diferentes (ej. puerto 5173 para Vite y puerto 3000 para Express).
- El servidor Express no incluye las cabeceras HTTP necesarias (como
Access-Control-Allow-Origin) en la respuesta. - Se están realizando peticiones con credenciales (cookies o tokens de autorización) sin la configuración adecuada en ambos extremos.
Método 1: Instalar y Configurar el Middleware CORS Oficial
La forma más rápida, limpia y recomendada de solucionar este problema en Express es utilizando el paquete oficial cors.
- Abre tu terminal en la raíz del proyecto backend.
- Instala el paquete ejecutando el siguiente comando:
npm install cors - Abre tu archivo principal del servidor (por ejemplo,
index.jsoapp.js). - Importa el paquete y utilízalo como middleware global 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 configurado correctamente!' });
});
app.listen(3000, () => {
console.log('Servidor corriendo en el puerto 3000');
});Método 2: Configurar CORS para Orígenes Específicos en Producción
Permitir el acceso desde 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.
- Modifica la inicialización del middleware CORS pasando un objeto de configuración con la opción
origin. - Define una lista blanca de URLs permitidas.
- Implementa la siguiente estructura en tu archivo de configuración del servidor:
const express = require('express');
const cors = require('cors');
const app = express();
const whitelist = ['https://tudominio.com', 'http://localhost:5173'];
const corsOptions = {
origin: function (origin, callback) {
// Permitir solicitudes sin origen (como aplicaciones móviles o Postman)
if (!origin || whitelist.indexOf(origin) !== -1) {
callback(null, true);
} else {
callback(new Error('Bloqueado por la política CORS'));
}
}
};
app.use(cors(corsOptions));