¿Qué es el Error CORS en el Desarrollo Backend?
El error de CORS (Cross-Origin Resource Sharing o Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad implementado por los navegadores web. Este bloquea las solicitudes HTTP realizadas desde un dominio, puerto o protocolo diferente al del servidor backend que expone la API.
Cuando estás desarrollando una aplicación moderna separando el frontend (por ejemplo, React o Vue en el puerto 3000) y el backend (Node.js con Express en el puerto 5000), es muy común encontrarse con el mensaje de bloqueo en la consola del navegador:
Access to XMLHttpRequest at 'http://localhost:5000/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.Causas Principales del Bloqueo CORS
Las causas fundamentales de este error en entornos de desarrollo y producción son:
- Falta de las cabeceras HTTP de control de acceso en la respuesta del servidor.
- Intento de consumir una API desde un origen no autorizado explícitamente.
- Uso de credenciales (como cookies o tokens de autorización) sin la configuración adecuada en el cliente y el servidor.
Método 1: Solución Rápida Usando el Middleware CORS en Express
La forma más eficiente y recomendada de solucionar este problema en Node.js utilizando Express es mediante el paquete oficial cors.
- Abre tu terminal en la raíz del proyecto backend.
- Instala el paquete ejecutando el siguiente comando:
npm install cors - Importa y configura el middleware en tu archivo principal (por ejemplo,
server.jsoapp.js):
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 exitosamente!' });
});
app.listen(5000, () => {
console.log('Servidor corriendo en puerto 5000');
});Método 2: Configuración Avanzada y Restrictiva para Producción
Habilitar CORS para cualquier origen (*) puede representar un riesgo de seguridad en entornos de producción. Es una buena práctica limitar el acceso únicamente a los dominios confiables.
- Define una lista blanca de orígenes permitidos en tu código.
- Configura el middleware pasando un objeto de opciones con la propiedad
origin.
const express = require('express');
const cors = require('cors');
const app = express();
const whitelist = ['http://localhost:3000', 'https://tudominio.com'];
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));
app.get('/api/secure', (req, res) => {
res.json({ message: 'Acceso autorizado por CORS restringido' });
});
app.listen(5000);