¿Qué es el Error CORS y por qué ocurre en el Desarrollo Web?
El error CORS (Cross-Origin Resource Sharing o Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad implementado por los navegadores web modernos. Su objetivo es restringir las solicitudes HTTP realizadas desde scripts hacia un dominio diferente al que sirvió la página original, previniendo ataques de tipo CSRF y robos de datos.
Cuando intentas consumir una API desde tu aplicación frontend alojada en http://localhost:3000 hacia un servidor backend en http://api.misitio.com sin los permisos adecuados, el navegador bloquea la respuesta y muestra el temido mensaje en la consola: 'Access to fetch at '...' from origin '...' has been blocked by CORS policy'.
Causas Principales del Error CORS
- Falta de cabeceras HTTP de control de acceso en el servidor backend.
- Intento de realizar peticiones con credenciales (cookies o tokens de autenticación) sin la configuración adecuada.
- Uso incorrecto de métodos HTTP (como PUT o DELETE) que activan solicitudes de comprobación previa (preflight requests con OPTIONS).
- Configuración errónea de los proxies de desarrollo en frameworks como React, Vue o Angular.
Método 1: Configurar las Cabeceras CORS en el Servidor Backend (Node.js / Express)
La forma más robusta de solucionar CORS es permitir explícitamente los orígenes confiables desde el servidor que procesa las peticiones. Si utilizas Node.js con Express, puedes instalar el paquete oficial cors.
- Instala el paquete ejecutando
npm install corsen la terminal de tu proyecto backend. - Importa y habilita el middleware en tu archivo principal (por ejemplo,
server.js). - Configura los dominios permitidos para mayor seguridad en producción.
Ejemplo de código:
const express = require('express');
const cors = require('cors');
const app = express();
const corsOptions = {
origin: 'http://localhost:3000',
optionsSuccessStatus: 200
};
app.use(cors(corsOptions));
app.get('/api/data', (req, res) => {
res.json({ message: '¡CORS configurado con éxito!' });
});
app.listen(5000);Método 2: Configurar un Proxy en el Entorno de Desarrollo Frontend
Si no tienes acceso para modificar el código del servidor backend y solo estás desarrollando el frontend, puedes utilizar un proxy de desarrollo para engañar al navegador haciendo creer que las peticiones se realizan al mismo origen.
- Si usas React (Create React App), abre tu archivo
package.json. - Agrega la propiedad
proxyapuntando al servidor backend:"proxy": "http://localhost:5000". - Si usas Vite, configura el archivo
vite.config.jsdentro de la secciónserver.proxy.
Ejemplo de configuración en Vite:
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:5000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});