Cómo Solucionar el Error 'CORS Policy' en JavaScript de Forma Definitiva

¿Qué es el Error CORS y por qué ocurre en JavaScript?

El error Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy es un mecanismo de seguridad implementado por los navegadores web modernos conocido como Same-Origin Policy (Política de Mismo Origen). Este sistema evita que un script ejecutado en un dominio realice solicitudes HTTP a un dominio diferente, a menos que el servidor de destino responda explícitamente con las cabeceras HTTP correctas permitiendo dicha conexión.

Causas principales del bloqueo CORS

Existen diversos escenarios comunes que provocan este fallo en el desarrollo web:

• Intentar consumir una API externa desde localhost sin los permisos configurados en el servidor.
• Falta de las cabeceras HTTP Access-Control-Allow-Origin en las respuestas del servidor backend.
• Realizar peticiones con credenciales (cookies o tokens de autenticación) sin configurar adecuadamente los encabezados de CORS.
• El navegador bloquea solicitudes complejas (como métodos PUT, DELETE o con cabeceras personalizadas) porque el servidor no responde correctamente a la petición previa de tipo OPTIONS (preflight request).

Método 1: Configurar las cabeceras CORS en el Servidor Backend (Node.js con Express)

La forma más robusta y recomendada de solucionar el error CORS es configurar el servidor backend para que autorice las peticiones del origen de tu aplicación frontend.

1. Instala el paquete oficial de CORS en tu proyecto de Node.js ejecutando el siguiente comando en tu terminal: npm install cors
2. Abre el archivo principal de tu servidor (ej. app.js o server.js).
3. Importa e implementa el middleware de CORS antes de definir tus rutas:

const express = require('express');
const cors = require('cors');
const app = express();
// Habilitar CORS para todas las rutas
app.use(cors());

Si deseas restringir el acceso únicamente a tu dominio de producción, puedes configurarlo de la siguiente manera:

const corsOptions = {
origin: 'https://tu-sitio-web.com',
optionsSuccessStatus: 200
};
app.use(cors(corsOptions));

Método 2: Usar un Proxy Inverso en Desarrollo (Vite o React)

Si estás desarrollando una aplicación frontend utilizando herramientas modernas como Vite o React y no tienes acceso para modificar el código del servidor backend, puedes configurar un proxy de desarrollo para saltarte las restricciones del navegador.

1. Si utilizas Vite, abre el archivo de configuración vite.config.js en la raíz de tu proyecto.
2. Agrega la propiedad server.proxy dentro de la función defineConfig:

export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.servidor-externo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});

Una vez configurado, realiza las peticiones desde tu código JavaScript apuntando a /api/recurso en lugar de la URL completa, evitando así el error de política CORS en tu entorno local.