¿Qué es el error CORS y por qué ocurre en el desarrollo web?
El error CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web que restringe las solicitudes HTTP realizadas desde un script hacia un dominio diferente al que sirvió la página original. Esta política de mismo origen (Same-Origin Policy) previene que sitios maliciosos lean datos sensibles de otros servicios, pero suele convertirse en un dolor de cabeza constante para los desarrolladores frontend y backend.
Causas principales del bloqueo CORS
Existen diversos motivos por los cuales tu navegador rechaza una petición AJAX o Fetch:
- Falta de cabeceras HTTP de control de acceso en el servidor de destino.
- Intento de consumir una API pública o privada desde un origen (localhost, dominio) no autorizado.
- Uso de métodos HTTP (como PUT, DELETE o cabeceras personalizadas) que requieren una solicitud previa de tipo
OPTIONS(preflight request) la cual es rechazada por el servidor. - Configuración incorrecta en entornos de desarrollo local al conectar puertos distintos entre el cliente y el servidor.
Método 1: Configurar las cabeceras CORS en el servidor backend (Node.js / Express)
La solución más robusta y recomendada para producción es configurar el servidor para que permita explícitamente los orígenes que necesitan acceder a los recursos. Si utilizas Node.js con Express, puedes instalar y configurar el paquete cors.
Primero, instala el paquete en tu proyecto:
npm install cors
Luego, incorpóralo en tu archivo principal de servidor:
const express = require('express');const cors = require('cors');const app = express();app.use(cors()); // Permite todas las solicitudes de cualquier origen// O de forma restrictiva:app.use(cors({ origin: 'http://localhost:3000' }));
Método 2: Utilizar un proxy inverso en el entorno de desarrollo
Si estás desarrollando una aplicación en React, Vue o Angular y no tienes acceso al código del servidor backend que consumes, puedes configurar un proxy en tu herramienta de empaquetado local (como Vite o Webpack) para evitar las restricciones del navegador.
Si usas Vite, abre tu archivo vite.config.js y añade la siguiente configuración en el objeto principal:
export default defineConfig({ server: { proxy: { '/api': { target: 'https://api.serviciodestino.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }});
De esta manera, tus peticiones frontend apuntarán a /api y el entorno de desarrollo redirigirá la llamada ocultando el origen real.
Método 3: Manejo correcto de solicitudes preflight (OPTIONS)
Cuando envías peticiones complejas (que incluyen cabeceras de autorización como Bearer Token o tipos de contenido específicos como application/json), el navegador envía automáticamente una petición previa llamada OPTIONS. Asegúrate de que tu servidor responda correctamente a este método HTTP con un código de estado 204 o 200 y las cabeceras correspondientes:
res.setHeader('Access-Control-Allow-Origin', '*');res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');