Introducción al Error de CORS en el Desarrollo Web
Uno de los dolores de cabeza más comunes al desarrollar aplicaciones web modernas es encontrarse con el temido error de CORS (Cross-Origin Resource Sharing) en la consola del navegador al utilizar la Fetch API o Axios. Este mecanismo de seguridad implementado por los navegadores bloquea las peticiones HTTP realizadas desde un dominio (origen) hacia un servidor distinto.
Causas Principales del Error CORS
El error se dispara principalmente por las siguientes razones:
- El servidor de destino no incluye las cabeceras HTTP necesarias (como
Access-Control-Allow-Origin). - La petición se realiza desde un origen local (ej.
http://localhost:3000) a una API en producción sin el permiso explícito. - Se envían credenciales o cabeceras personalizadas sin la configuración previa del navegador (peticiones preflight con el método OPTIONS).
Método 1: Configurar las Cabeceras CORS en el Servidor (Backend)
La solución más robusta y recomendada es configurar tu servidor backend para que permita solicitudes desde tu origen de desarrollo o producción. Si estás usando Node.js con Express, puedes hacerlo fácilmente instalando y configurando el middleware cors.
- Instala el paquete en tu proyecto de Node.js ejecutando:
npm install cors - Importa y utiliza el middleware en tu archivo principal (ej.
app.jsoserver.js):
const express = require('express');
const cors = require('cors');
const app = express();
// Permitir todos los origenes (solo para desarrollo)
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ mensaje: 'CORS solucionado con exito' });
});
app.listen(3000);
Método 2: Usar un Servidor Proxy en el Frontend durante el Desarrollo
Si no tienes acceso al código del servidor backend y necesitas evitar el bloqueo CORS mientras desarrollas localmente, puedes configurar un proxy en tu entorno de desarrollo de frontend (como Vite 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/, '')
}
}
}
});
- Realiza tus peticiones en JavaScript apuntando a la ruta relativa (ej.
fetch('/api/recurso')) en lugar de la URL completa.
Método 3: Configurar la Petición Fetch con el Modo Correcto
En ocasiones, configurar el objeto de opciones en la Fetch API puede ayudar a mitigar problemas menores de interoperabilidad, aunque no reemplaza la necesidad de las cabeceras en el servidor.
fetch('https://api.ejemplo.com/datos', {
method: 'GET',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error CORS o de red:', error));