¿Qué es el Error CORS en JavaScript y por qué ocurre?
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 ejecutados en un dominio hacia un servidor ubicado en un dominio, puerto o protocolo diferente.
Cuando intentas consumir una API externa utilizando JavaScript mediante fetch(), axios o XMLHttpRequest sin la configuración adecuada en el servidor, el navegador bloquea la respuesta y muestra el temido mensaje en la consola de desarrollo: Access to fetch at '...' from origin '...' has been blocked by CORS policy.
Causas Principales del Error CORS
- Ausencia de las cabeceras HTTP de control de acceso (como
Access-Control-Allow-Origin) en la respuesta del servidor. - Intento de enviar credenciales (como cookies o tokens de autorización) sin la configuración explícita en el cliente y el servidor.
- Bloqueo de solicitudes de tipo preflight (peticiones OPTIONS) debido a que el servidor no responde correctamente a este método HTTP previo.
- Diferencia de puertos o protocolos (por ejemplo, intentar conectar un frontend en
http://localhost:3000con un backend enhttp://localhost:5000).
Método 1: Configurar las Cabeceras HTTP en el Servidor (Backend)
La solución más robusta y recomendada para producción es configurar el servidor backend para que permita explícitamente solicitudes desde tu dominio de frontend. A continuación se muestra un ejemplo utilizando Node.js con Express:
- Instala el paquete CORS oficial ejecutando en tu terminal:
npm install cors - Importa y utiliza el middleware en tu archivo principal de servidor (ej.
app.jsoserver.js):
const express = require('express');
const cors = require('cors');
const app = express();
// Permitir todas las peticiones de origen cruzado
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ message: '¡CORS configurado con éxito!' });
});
app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));
Método 2: Usar un Servidor Proxy para Entornos de Desarrollo
Si estás desarrollando localmente y no tienes acceso para modificar el código del backend de terceros o API pública, puedes configurar un proxy en tu herramienta de desarrollo (como Vite, Webpack o React Scripts).
- Si utilizas 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/, '')
}
}
}
});
- Ahora, en lugar de realizar la petición a la URL completa, hazla apuntando a tu ruta local relativa:
fetch('/api/recurso'). El navegador creerá que la petición es del mismo origen y evitará el bloqueo CORS.