Introducción al Error CORS en JavaScript
Uno de los dolores de cabeza más comunes para los desarrolladores web frontend y backend es encontrarse con el temido bloqueo de CORS (Cross-Origin Resource Sharing) en la consola del navegador. Este mecanismo de seguridad implementado por los navegadores modernos restringe las solicitudes HTTP realizadas desde un origen hacia un dominio diferente, a menos que el servidor de destino otorgue permisos explícitos mediante cabeceras HTTP específicas.
Causas Principales del Bloqueo CORS
El error CORS se desencadena principalmente debido a las políticas de seguridad del navegador (Same-Origin Policy). Las causas más habituales incluyen:
- Intentar consumir una API desde
http://localhost:3000hacia un servidor enhttps://api.midominio.comsin la configuración adecuada. - Falta de cabeceras de respuesta HTTP como
Access-Control-Allow-Originen el servidor. - Realizar solicitudes con credenciales (como cookies o tokens de autorización) sin configurar correctamente las políticas de intercambio de recursos.
Método 1: Configurar las Cabeceras CORS en el Servidor (Backend)
La solución más robusta y recomendada para producción es configurar el servidor backend para que permita solicitudes desde tu origen frontend. Dependiendo de tu tecnología, debes añadir las cabeceras correspondientes.
Si utilizas Node.js con Express, puedes utilizar el paquete oficial cors:
- Instala el paquete ejecutando
npm install corsen tu terminal. - Importa y utiliza el middleware en tu archivo principal:
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ message: '¡CORS configurado correctamente!' });
app.listen(3000);Método 2: Utilizar un Servidor Proxy para Desarrollo Local
Si estás desarrollando en local y no tienes acceso al código fuente del backend para modificar las cabeceras CORS, puedes configurar un proxy en tu entorno de desarrollo frontend.
- Si utilizas Vite, abre tu archivo
vite.config.jsy añade la propiedadserver.proxy:
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.servidor-externo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});De esta forma, el navegador creerá que la petición se realiza al mismo dominio local, evitando por completo el error CORS mientras programas.