¿Qué es el error CORS en JavaScript y por qué ocurre?
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 intentas consumir una API externa utilizando la Fetch API de JavaScript y el servidor de destino no incluye las cabeceras HTTP adecuadas, el navegador bloquea la respuesta y muestra un error en la consola.
Principales causas del fallo CORS
Identificar la causa raíz te ayudará a aplicar la solución correcta. Los motivos más comunes incluyen:
- Falta de las cabeceras
Access-Control-Allow-Originen las respuestas del servidor backend. - Intentar realizar peticiones con credenciales (cookies o tokens de autorización) sin la configuración previa adecuada.
- Bloqueo de solicitudes de tipo preflight (métodos HTTP como PUT, DELETE o con cabeceras personalizadas usando el método
OPTIONS).
Método 1: Configurar las cabeceras en el Servidor (Solución Backend)
La forma más correcta y profesional de solucionar CORS es configurar el servidor que aloja la API para que permita peticiones desde tu origen. Por ejemplo, en una aplicación Node.js con Express, puedes usar el middleware oficial:
const express = require('express');
const cors = require('cors');
const app = express();
// Habilitar CORS para todas las rutas
app.use(cors());
app.get('/api/datos', (req, res) => {
res.json({ mensaje: '¡CORS configurado con éxito!' });
});
app.listen(3000, () => console.log('Servidor corriendo'));Método 2: Usar un Proxy Inverso durante el Desarrollo
Si no tienes acceso al código del servidor backend y estás en fase de desarrollo local, puedes utilizar un proxy para evitar las restricciones del navegador. Si utilizas Vite o React (Webpack), puedes configurarlo fácilmente en tu archivo vite.config.js:
export default {
server: {
proxy: {
'/api': {
target: 'https://api.ejemplo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
};De esta manera, tus peticiones Fetch apuntarán a tu propio servidor local de desarrollo y este se encargará de redirigirlas sin que el navegador detecte un conflicto de origen cruzado.