¿Qué es el Error CORS y por qué ocurre en Desarrollo?
El mecanismo de CORS (Cross-Origin Resource Sharing) es una medida de seguridad implementada por los navegadores web para restringir las solicitudes HTTP realizadas desde scripts hacia un dominio diferente al que sirvió la página original. Cuando intentas consumir una API externa o conectar tu frontend (por ejemplo, en http://localhost:3000) con tu backend (en http://localhost:5000) sin la configuración adecuada, el navegador bloquea la respuesta y arroja el temido error CORS en la consola de JavaScript.
Causas Principales del Error CORS
Entre las razones más comunes por las que aparece esta incidencia en entornos de desarrollo y producción se encuentran:
- Falta de cabeceras HTTP de control de acceso en el servidor (como
Access-Control-Allow-Origin). - Intento de enviar credenciales (cookies o tokens de autorización) sin el permiso explícito del servidor.
- Peticiones con métodos HTTP no permitidos o uso de cabeceras personalizadas no autorizadas previamente por la política del servidor.
Método 1: Configurar CORS en el Servidor Backend (Node.js con Express)
La solución más limpia y recomendada es habilitar CORS directamente en tu servidor backend. Si estás utilizando Node.js con Express, puedes instalar y configurar el paquete oficial cors de forma muy sencilla.
- Instala el paquete ejecutando
npm install corsen la terminal de tu proyecto backend. - Importa y utiliza el middleware en tu archivo principal (por ejemplo,
app.jsoserver.js). - Configura las opciones permitidas según tus necesidades de desarrollo y producción.
Ejemplo de código de implementación:
const express = require('express');
const cors = require('cors');
const app = express();
// Habilitar CORS para todas las peticiones
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: Utilizar un Proxy Inverso en el Entorno de Desarrollo
Si no tienes acceso para modificar el código del servidor backend de la API que estás consumiendo, puedes configurar un proxy inverso en tu herramienta de desarrollo frontend (como Vite o React Scripts).
- Abre la configuración de tu empaquetador (por ejemplo,
vite.config.js). - Añade la sección
server.proxypara redirigir las peticiones locales hacia el servidor de la API, evitando así que el navegador detecte un cruce de dominios.
Ejemplo de configuración en Vite:
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.ejemplo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});Método 3: Instalar una Extensión en el Navegador (Solo para Pruebas Locales)
Si te encuentras en una fase temprana de prototipado y necesitas probar una API rápidamente sin modificar código:
- Dirígete a la tienda de extensiones de tu navegador (Chrome Web Store o Firefox Add-ons).
- Busca e instala una extensión de deshabilitación de CORS (como 'Allow CORS: Access-Control-Allow-Origin').
- Activa la extensión desde la barra de herramientas para permitir que las peticiones se realicen sin bloqueos durante tus pruebas locales. Nota: Recuerda desactivarla al terminar para mantener la seguridad de navegación.