¿Qué es el Error CORS y por qué ocurre en el desarrollo web?
El error CORS (Cross-Origin Resource Sharing o Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad implementado por los navegadores web modernos. Su función principal es restringir las solicitudes HTTP realizadas desde scripts hacia un dominio diferente al que sirvió la página original, previniendo así ataques maliciosos como el robo de datos o CSRF.
Cuando intentas conectar tu aplicación frontend (por ejemplo, en React o Vue ejecutándose en http://localhost:3000) con una API backend independiente (en http://localhost:5000), el navegador bloquea la respuesta y muestra un mensaje en la consola indicando que la política de CORS ha bloqueado el acceso.
Causas principales del bloqueo por CORS
El problema no radica en que tu código esté mal escrito lógicamente, sino en la ausencia de los permisos de comunicación adecuados entre servidores. Las causas más comunes incluyen:
- El servidor backend no incluye las cabeceras HTTP necesarias en sus respuestas.
- Se intenta enviar credenciales (como cookies o tokens de autorización) sin la configuración correcta en ambos extremos.
- Métodos HTTP específicos (como
PUT,DELETEo cabeceras personalizadas) no están permitidos explícitamente por el servidor.
Método 1: Solucionar CORS en Node.js usando el paquete cors
Si estás desarrollando una API utilizando Node.js y Express, la forma más rápida y recomendada de solucionar este inconveniente es utilizando el middleware oficial cors.
- Instala el paquete en tu proyecto ejecutando el siguiente comando en tu terminal:
npm install cors - Importa y configura el middleware en tu archivo principal (ej.
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 con éxito!' });
});
app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));Método 2: Configurar cabeceras HTTP manualmente en el servidor
Si no deseas utilizar librerías de terceros y prefieres configurar las respuestas de manera nativa, puedes interceptar las peticiones HTTP mediante un middleware personalizado y añadir las cabeceras requeridas por el estándar W3C.
- Crea una función middleware en tu servidor para inyectar las cabeceras de control de acceso:
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});Esta configuración le indica explícitamente al navegador que confíe en las peticiones provenientes de http://localhost:3000 y permita el flujo seguro de información entre ambos entornos de desarrollo.