Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) en JavaScript de Forma Definitiva

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

El error CORS (Cross-Origin Resource Sharing o Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad implementado por los navegadores web. Su función es restringir las solicitudes HTTP realizadas desde scripts hacia un dominio diferente al que sirvió la página original, previniendo así ataques maliciosos como el robo de datos sensibles (CSRF).

Cuando intentas conectar tu aplicación frontend (por ejemplo, desarrollada en React, Vue o JavaScript vainilla en http://localhost:3000) con una API backend ubicada en un dominio distinto (como https://api.miweb.com), el navegador bloquea la respuesta si el servidor no incluye los permisos adecuados en sus cabeceras HTTP.

Causas Principales del Bloqueo CORS

• Falta de las cabeceras HTTP de control de acceso en el servidor backend.
• Intento de enviar solicitudes con credenciales (como cookies o tokens de autorización) sin la configuración previa requerida.
• Peticiones de tipo preflight (método OPTIONS) rechazadas por el servidor de la API.
• Diferencias estrictas en el protocolo (HTTP vs HTTPS), el dominio o el puerto entre el cliente y el servidor.

Método 1: Configurar las Cabeceras HTTP en el Servidor (Backend)

La forma más limpia y recomendada de solucionar el error CORS es configurar tu servidor backend para que permita explícitamente las solicitudes desde tu dominio frontend. Si estás usando Node.js con Express, puedes implementar el paquete oficial cors:

1. Instala el paquete ejecutando npm install cors en la terminal de tu proyecto backend.
2. Importa y utiliza el middleware en tu archivo principal de servidor (por ejemplo, server.js):
   const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
// O de forma más restrictiva:
// app.use(cors({ origin: 'http://localhost:3000' }));
3. Reinicia tu servidor y verifica que las peticiones ya no arrojen el error en la consola del navegador.

Método 2: Configurar un Proxy de Desarrollo en el Frontend

Si no tienes acceso para modificar el código del servidor backend y te encuentras en un entorno de desarrollo local, puedes configurar un proxy en tu herramienta de empaquetado (como Vite, Webpack o React Scripts) para engañar al navegador simulando que las peticiones se hacen al mismo origen.

1. Si usas Vite, abre tu archivo vite.config.js y añade la propiedad server.proxy:
   export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.miweb.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});
2. Modifica las llamadas en tu código JavaScript para que apunten a la ruta relativa (ej. fetch('/api/usuarios')) en lugar de la URL completa.
3. Reinicia tu servidor de desarrollo y comprueba que el problema ha desaparecido.