Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) en JavaScript Paso a Paso

Introducción al Error CORS en JavaScript

Uno de los dolores de cabeza más comunes para los desarrolladores web frontend y backend es el temido error de CORS (Cross-Origin Resource Sharing). Este bloqueo ocurre cuando tu aplicación JavaScript (ejecutándose en un dominio, puerto o protocolo) intenta realizar una petición HTTP a un servidor ubicado en un origen diferente, y las políticas de seguridad del navegador la rechazan automáticamente.

Causas Principales del Error CORS

El mecanismo de seguridad de los navegadores modernos bloquea las solicitudes de origen cruzado por defecto a menos que el servidor de destino indique explícitamente que acepta solicitudes de otros orígenes. Las causas más frecuentes incluyen:

• Falta de los encabezados HTTP adecuados (como Access-Control-Allow-Origin) en la respuesta del servidor.
• Intentar conectar un frontend en desarrollo (por ejemplo, http://localhost:3000) con una API en otro puerto sin la configuración previa.
• Uso de métodos HTTP avanzados o envío de cabeceras personalizadas (como Authorization) sin habilitar la petición de comprobación previa o preflight (método OPTIONS).

Método 1: Configurar las Cabeceras CORS en el Servidor (Node.js / Express)

La solución definitiva y recomendada para producción es configurar tu servidor backend para que permita solicitudes desde tu origen frontend. Si utilizas Node.js con Express, puedes hacerlo utilizando el paquete oficial cors.

1. Instala el paquete CORS ejecutando el siguiente comando en tu terminal:
   npm install cors
2. Importa y habilita el middleware en tu archivo principal de servidor (por ejemplo, server.js o app.js):
   const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
3. Si deseas restringir el acceso únicamente a tu dominio de confianza, configura el origen de esta manera:
   app.use(cors({ origin: 'https://tu-sitio-web.com' }));

Método 2: Utilizar un Proxy Inverso durante el Desarrollo (Vite / Webpack)

Si estás desarrollando una SPA (Single Page Application) utilizando herramientas modernas como Vite o React con Webpack, y no tienes acceso directo al código del servidor backend, puedes configurar un proxy de desarrollo para engañar al navegador y evitar las restricciones de CORS.

Si usas Vite, abre tu archivo vite.config.js y añade la siguiente configuración dentro de defineConfig:

1. Modifica tu archivo de configuración para redirigir las peticiones:
   export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.servidor-externo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});
2. Realiza tus peticiones fetch directamente a /api/recurso en lugar de la URL completa, y Vite se encargará de reenviarla sin activar el bloqueo CORS en el navegador.