¿Qué es el Error CORS y por qué ocurre en JavaScript?
El error CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web que restringe las peticiones HTTP realizadas desde un dominio (origen) hacia otro dominio diferente. Cuando intentas consumir una API desde tu aplicación de frontend alojada en un puerto o URL distinta sin la autorización explícita del servidor, el navegador bloquea la respuesta y muestra el temido error en la consola de depuración de JavaScript.
Causas Principales del Bloqueo CORS
- Ausencia de cabeceras HTTP de control de acceso en el servidor receptor (como
Access-Control-Allow-Origin). - Realizar peticiones con credenciales (cookies o tokens de autenticación) sin configurar correctamente el servidor y el cliente.
- Configuración errónea de los métodos HTTP permitidos (GET, POST, PUT, DELETE) durante las solicitudes preflight (solicitudes OPTIONS).
Método 1: Configurar las Cabeceras CORS en el Servidor (Backend)
La solución más recomendada y definitiva en entornos de producción es configurar tu servidor backend para que permita solicitudes desde el origen de tu aplicación frontend. Si estás utilizando Node.js con Express, puedes implementar el paquete cors de la siguiente manera:
- Instala el paquete ejecutando
npm install corsen tu terminal de desarrollo. - Importa y utiliza el middleware en tu archivo principal de Express:
const express = require('express');
const cors = require('cors');
const app = express();
// Habilitar CORS para todas las solicitudes
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ message: '¡Acceso CORS permitido!' });
});
app.listen(3000);Método 2: Utilizar un Servidor Proxy en el Entorno de Desarrollo
Durante la fase de desarrollo local, es común encontrarse con bloqueos CORS al conectar React, Vue o Angular con una API externa. Puedes configurar un proxy en tu empaquetador para evitar estas restricciones saltando el origen del navegador.
- Si usas
webpack-dev-servero Vite, abre tu archivo de configuración (por ejemplo,vite.config.js). - Agrega la regla de reescritura de proxy para redirigir las peticiones:
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.ejemplo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});