¿Qué es el error CORS y por qué ocurre en el desarrollo web?
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 estás desarrollando aplicaciones web utilizando JavaScript moderno y Node.js, es muy común encontrarse con la temida advertencia en la consola: Access to fetch at 'http://localhost:3000/api' from origin 'http://localhost:5173' has been blocked by CORS policy.
Causas principales del bloqueo por política de origen cruzado
Las causas de este problema son estrictamente de seguridad en el entorno del navegador y se deben a:
- Intentar consumir una API desde un puerto diferente al del servidor backend (ej. frontend en 5173 y backend en 3000).
- Falta de cabeceras HTTP específicas 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 oficial cors
La forma más rápida, limpia y recomendada en el ecosistema de Node.js y Express es utilizar el middleware cors. Sigue estos pasos para implementarlo correctamente:
- Abre tu terminal en la carpeta raíz de tu proyecto backend de Node.js.
- Instala el paquete ejecutando el siguiente comando:
npm install cors - Abre tu archivo principal de configuración (usualmente
app.jsoserver.js). - Importa e implementa el middleware antes de definir tus rutas con el siguiente 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);
Método 2: Configurar CORS personalizado para entornos de producción
Si tu aplicación va a pasar a producción, dejar CORS abierto para cualquier dominio puede ser un riesgo de seguridad. Es recomendable restringir los orígenes permitidos:
- Modifica la implementación del middleware
corspasando un objeto de configuración con los dominios autorizados. - Asegúrate de definir correctamente los métodos HTTP permitidos (GET, POST, PUT, DELETE).
const corsOptions = {
origin: 'https://tu-dominio-frontend.com',
optionsSuccessStatus: 200
};
app.use(cors(corsOptions));
Conclusión
El error CORS no es un fallo de programación, sino una medida de seguridad del navegador. Configurando adecuadamente tu servidor backend con Express o mediante cabeceras HTTP manuales, podrás permitir la comunicación fluida entre tu frontend y tu API sin comprometer la seguridad de tu aplicación.