¿Qué es el Error CORS en JavaScript?
El error CORS (Cross-Origin Resource Sharing o Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad implementado por los navegadores web. Este bloquea las peticiones HTTP realizadas desde un script en ejecución en un dominio (origen) hacia un servidor ubicado en un dominio diferente, a menos que el servidor de destino incluya cabeceras HTTP específicas que autoricen explícitamente dicha conexión.
Causas Principales del Error CORS
Existen diversos escenarios comunes que provocan este fallo en entornos de desarrollo y producción:
- Intentar consumir una API externa desde localhost sin que el servidor backend permita orígenes locales.
- Falta de configuración de las cabeceras HTTP de control de acceso en el servidor (como
Access-Control-Allow-Origin). - Realizar peticiones con credenciales (cookies o tokens de autorización) sin la debida configuración en el cliente y el servidor.
Método 1: Configurar las Cabeceras HTTP en el Servidor (Backend)
La solución definitiva y recomendada en producción es configurar tu servidor backend para que permita solicitudes desde el origen de tu aplicación frontend. Si utilizas Node.js con Express, puedes hacerlo utilizando el paquete oficial cors.
Primero, instala el paquete en tu proyecto de backend ejecutando el siguiente comando en tu terminal:
npm install corsLuego, intégralo en tu archivo principal de servidor (por ejemplo, app.js o server.js) con el siguiente código:
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 correctamente!' });
});
app.listen(3000, () => console.log('Servidor corriendo en puerto 3000'));Método 2: Utilizar un Servidor Proxy Inverso en Desarrollo
Si estás desarrollando una aplicación frontend (por ejemplo, con React, Vue o Angular) y el backend pertenece a un tercero que no puedes modificar, puedes configurar un proxy de desarrollo.
Si usas Vite, abre tu archivo vite.config.js y añade la siguiente configuración para redirigir las peticiones:
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.ejemplo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});Método 3: Configurar Fetch con Credenciales y Modos Especiales
En ocasiones, si necesitas enviar cookies de autenticación junto con tu solicitud, debes asegurarte de configurar correctamente el objeto de opciones en tu función fetch de JavaScript.
Utiliza la propiedad credentials: 'include' y asegúrate de que el servidor responda con Access-Control-Allow-Credentials: true:
fetch('https://api.ejemplo.com/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error CORS o de red:', error));