Introducción al Error CORS en Node.js
Uno de los dolores de cabeza más comunes para los desarrolladores web full-stack es el temido error de CORS (Cross-Origin Resource Sharing) al intentar conectar un frontend (como React, Angular o Vue) con un backend en Node.js y Express. Este mecanismo de seguridad de los navegadores bloquea las peticiones realizadas desde un dominio, puerto o protocolo diferente al del servidor, a menos que este último autorice explícitamente el acceso mediante cabeceras HTTP específicas.
Causas Principales del Bloqueo CORS
El error se manifiesta en la consola del navegador con mensajes como Access to fetch at 'http://localhost:5000/api' from origin 'http://localhost:3000' has been blocked by CORS policy. Las causas principales son:
- El servidor backend no incluye las cabeceras HTTP necesarias (como
Access-Control-Allow-Origin). - El cliente realiza una petición de tipo
POSToPUTcon cabeceras personalizadas que activan una petición previa de tipoOPTIONS(preflight request), la cual es rechazada por el servidor. - Falta de configuración para permitir credenciales (cookies o headers de autorización).
Método 1: Instalar y Configurar el Paquete CORS en Express
La forma más rápida, limpia y recomendada para solucionar este problema en una aplicación de Node.js con Express es utilizando el middleware 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,
server.jsoapp.js). - Importa y añade el middleware antes de definir tus rutas:
const express = require('express');
const cors = require('cors');
const app = express();
// Habilitar CORS para todas las peticiones
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: Configuración Avanzada y Restricción de Orígenes
Permitir el acceso desde cualquier origen (usando *) puede representar un riesgo de seguridad en entornos de producción. Es recomendable limitar qué dominios pueden consumir tu API.
- Modifica la inicialización del middleware
corspasando un objeto de configuración con la propiedadorigin. - Define una lista blanca de dominios permitidos.
- Ejemplo de implementación avanzada:
const express = require('express');
const cors = require('cors');
const app = express();
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'));
}
},
methods: ['GET', 'POST', 'PUT', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization']
};
app.use(cors(corsOptions));