¿Qué es el Error CORS y por qué ocurre en Node.js?
El error CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web que restringe las solicitudes HTTP realizadas desde un dominio (origen) hacia un servidor ubicado en un dominio diferente. Cuando desarrollas una API en Node.js con Express y tu frontend se encuentra en otro puerto o dominio, el navegador bloquea la respuesta por defecto.
Causas principales del bloqueo por CORS
- Ausencia de cabeceras HTTP de control de acceso en las respuestas del servidor.
- Intentar consumir una API desde un dominio, subdominio o puerto diferente sin autorización previa.
- Configuración restrictiva en el middleware de seguridad del backend.
Método 1: Instalar y configurar el paquete cors en Express
La forma más rápida y recomendada de solucionar este problema en Node.js es utilizando el paquete oficial cors. Sigue estos pasos para implementarlo:
- Abre tu terminal en la raíz del proyecto backend.
- Ejecuta el comando de instalación:
npm install cors - Abre tu archivo principal (por ejemplo,
app.jsoserver.js). - Importa y añade 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 por seguridad
Si estás en un entorno de producción, habilitar CORS para cualquier origen puede ser un riesgo de seguridad. Es recomendable limitar el acceso únicamente a tu dominio frontend autorizado:
- Define las opciones de configuración con una lista blanca de dominios permitidos.
- Aplica el middleware pasando el objeto de configuración:
const whitelist = ['https://tufrontendsitio.com'];
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 cabeceras HTTP manualmente (Sin librerías)
Si prefieres no instalar dependencias externas, puedes configurar manualmente los headers permitidos creando un middleware personalizado:
- Crea un archivo de middleware para interceptar las peticiones.
- Añade las cabeceras correspondientes para permitir métodos y credenciales:
app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization'); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); next(); });