Introducción al Error CORS en el Desarrollo Web
Uno de los dolores de cabeza más comunes para los desarrolladores frontend y backend es el temido error CORS (Cross-Origin Resource Sharing). Este mecanismo de seguridad implementado por los navegadores web bloquea las solicitudes HTTP realizadas desde un dominio (origen) diferente al del servidor que aloja los recursos, protegiendo así a los usuarios contra ataques maliciosos de falsificación de peticiones.
Causas Principales del Error CORS
El error se manifiesta en la consola del navegador con mensajes como Access to fetch at 'http://localhost:3000/api' from origin 'http://localhost:5173' has been blocked by CORS policy. Las causas principales son:
- Intentar consumir una API desde un puerto distinto (por ejemplo, frontend en el 3000 y backend en el 5000).
- Falta de cabeceras HTTP de control de acceso en las respuestas del servidor.
- Peticiones con credenciales (cookies o cabeceras de autorización) no permitidas explícitamente por el servidor.
Método 1: Solucionar CORS en Node.js usando el paquete Express CORS
Si estás desarrollando una API backend utilizando Node.js y Express, la forma más rápida y recomendada de solucionar este problema es instalando y configurando el middleware oficial cors.
- Abre tu terminal en la carpeta del proyecto backend.
- Instala el paquete ejecutando el siguiente comando:
npm install cors - Abre tu archivo principal de servidor (ej.
server.jsoapp.js) y añade las siguientes líneas de código:
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(3000, () => console.log('Servidor corriendo en puerto 3000'));
Método 2: Configurar CORS de forma personalizada y segura
Para entornos de producción, no es recomendable permitir el acceso a cualquier origen (usando *). Debes limitar qué dominios pueden consumir tu API.
- Modifica la configuración de tu middleware CORS en Express especificando un objeto de opciones con la propiedad
origin. - Utiliza el siguiente ejemplo de código para permitir únicamente a tu frontend acceder a los recursos:
const corsOptions = {
origin: 'https://tu-dominio-frontend.com',
optionsSuccessStatus: 200
};
app.use(cors(corsOptions));
Conclusión
El error CORS es simplemente una medida de seguridad del navegador que podemos configurar fácilmente desde nuestro servidor backend. Aplicando el middleware correcto en Node.js o configurando adecuadamente las cabeceras HTTP, podrás permitir la comunicación fluida y segura entre tu cliente y tu servidor.