¿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 que se realizan desde scripts hacia un dominio diferente al que sirvió la página original, previniendo así ataques maliciosos como el robo de datos o CSRF.
Sin embargo, durante el desarrollo legítimo de aplicaciones web separadas (por ejemplo, un frontend en React ejecutándose en http://localhost:3000 que consume una API en http://localhost:5000), es muy común tropezar con este bloqueo en la consola del navegador.
Principales causas del fallo CORS
- El servidor backend no incluye las cabeceras HTTP necesarias (como
Access-Control-Allow-Origin). - El navegador bloquea las solicitudes de pre-vuelo (método
OPTIONS) enviadas antes de peticiones complejas (PUT, DELETE, o con cabeceras personalizadas). - Configuración incorrecta de credenciales (como
Access-Control-Allow-Credentials: true) al enviar cookies o tokens de autorización.
Método 1: Configurar las cabeceras CORS en un servidor Node.js con Express
La forma más rápida y recomendada de solucionar este problema si controlas el backend es utilizando el middleware oficial cors en Express.
- Instala el paquete en tu proyecto ejecutando el siguiente comando en la terminal:
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();
// Permitir todas las solicitudes de origen cruzado
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ message: '¡CORS configurado correctamente!' });
});
app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));
Método 2: Configurar políticas CORS restrictivas para producción
Si tu aplicación va a producción, no debes usar cors() sin restricciones, ya que permitiría el acceso a cualquier dominio. Debes especificar qué dominios tienen permiso.
- Modifica la configuración del middleware especificando la opción
origin:
const whitelist = ['https://tudominio.com', 'https://otrodominio.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));
Método 3: Utilizar un Proxy inverso durante el desarrollo frontend
Si no tienes acceso al código del backend y necesitas evitar el bloqueo CORS mientras programas, puedes configurar un proxy en tu herramienta de desarrollo (como Vite, Webpack o Vue CLI).
- Si usas Vite, abre tu archivo
vite.config.jsy añade la propiedadserver.proxy:
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.ejemplo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});
De esta manera, las peticiones realizadas desde tu código a /api se redirigirán internamente saltándose las restricciones del navegador.