Introducción al Error CORS en Desarrollo Web
Uno de los dolores de cabeza más comunes para los desarrolladores frontend y backend es el temido error de CORS (Cross-Origin Resource Sharing). Este mecanismo de seguridad implementado por los navegadores web bloquea las solicitudes HTTP realizadas desde un dominio (origen) hacia un servidor diferente, a menos que el servidor permita explícitamente dicho acceso mediante cabeceras HTTP específicas.
Causas Principales del Error CORS
El error CORS se desencadena principalmente por las siguientes razones:
- El navegador detecta que el dominio, protocolo o puerto del cliente es diferente al de la API solicitada.
- El servidor backend no incluye las cabeceras de respuesta HTTP necesarias, como
Access-Control-Allow-Origin. - Las peticiones con métodos complejos (como PUT, DELETE o con cabeceras personalizadas) no responden correctamente a la solicitud previa o preflight request (método OPTIONS).
Método 1: Configurar las Cabeceras CORS en el Servidor (Node.js/Express)
La forma más limpia y definitiva de solucionar CORS en producción es configurando correctamente tu servidor backend para que acepte peticiones del origen de tu aplicación.
Si utilizas Node.js con Express, puedes instalar el paquete oficial de CORS y aplicarlo en tu aplicación:
npm install corsLuego, en tu archivo principal de servidor:
const express = require('express');
const cors = require('cors');
const app = express();
// Permitir todos los orígenes (solo para desarrollo)
app.use(cors());
// O configurar un origen específico
const corsOptions = {
origin: 'https://tu-dominio-frontend.com',
optionsSuccessStatus: 200
};
app.get('/api/data', cors(corsOptions), (req, res) => {
res.json({ message: '¡Acceso CORS permitido!' });
});Método 2: Utilizar un Servidor Proxy durante el Desarrollo Local
Cuando estás desarrollando localmente y no tienes acceso al código del servidor backend, configurar un proxy en tu herramienta de desarrollo es la solución ideal.
- Si utilizas Vite, abre tu archivo
vite.config.jsy añade la propiedadserver.proxy: export default defineConfig({ server: { proxy: { '/api': { target: 'https://api.servidor-externo.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } });- Realiza tus peticiones en JavaScript apuntando a
/api/recursoen lugar de la URL completa, evitando así que el navegador detecte un conflicto de origen cruzado.
Conclusión
El error CORS no es un fallo de programación, sino una capa de seguridad del navegador. Configurar adecuadamente las cabeceras en tu backend o utilizar un proxy en desarrollo te permitirá olvidarte de este problema y asegurar una comunicación fluida entre tu frontend y tus servicios web.