Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) Definitivamente

¿Qué es el Error CORS y por qué aparece en tus proyectos web?

El error CORS (Cross-Origin Resource Sharing o Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad implementado por los navegadores web modernos. Su función principal 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.

Sin embargo, durante el desarrollo local o al conectar una SPA (Single Page Application) en React o Vue con una API en Node.js, este bloqueo se convierte en un obstáculo común. Cuando el servidor de recursos no incluye los encabezados HTTP adecuados que autorizan al dominio solicitante, el navegador bloquea la respuesta y muestra el temido mensaje en la consola de desarrollo.

Causas principales del bloqueo CORS

• Realizar peticiones AJAX (con fetch o Axios) desde un puerto local (ej. http://localhost:3000) hacia otro puerto diferente (ej. http://localhost:5000).
• Falta de los encabezados HTTP requeridos (como Access-Control-Allow-Origin) en las respuestas del servidor backend.
• Configuración incorrecta de credenciales (cookies o tokens de autorización) en las solicitudes de origen cruzado.
• Peticiones con métodos HTTP complejos (como PUT o DELETE) que activan una solicitud previa o preflight request (método OPTIONS) la cual es rechazada por el servidor.

Método 1: Solucionar CORS en el servidor Backend (Node.js con Express)

La forma más limpia y recomendada de solucionar este problema en un entorno de Node.js es utilizando el paquete oficial cors proporcionado por Express.

1. Instala el paquete ejecutando el siguiente comando en tu terminal dentro de la carpeta del proyecto backend:
   npm install cors
2. Abre tu archivo principal de configuración (usualmente server.js o app.js) e importa el módulo:
   const cors = require('cors');
3. Habilita el middleware de CORS antes de definir tus rutas utilizando la siguiente línea:
   app.use(cors());
4. Si deseas restringir el acceso únicamente a tu dominio de producción, puedes configurarlo de la siguiente manera:
   app.use(cors({ origin: 'https,://tudominio.com' }));

Método 2: Configurar un Proxy en el Frontend durante el desarrollo

Si no tienes acceso para modificar el servidor backend o estás consumiendo una API de terceros, puedes evitar las restricciones del navegador configurando un proxy en tu herramienta de desarrollo frontend (como React con Create React App o Vite).

1. Si utilizas Vite, abre tu archivo vite.config.js y añade la propiedad server.proxy dentro de la configuración:
   export default defineConfig({ server: { proxy: { '/api': { target: 'https://api.servidor-externo.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } });
2. Si utilizas React tradicional, añade la propiedad proxy directamente en tu archivo package.json apuntando al servidor de desarrollo:
   "proxy": "http://localhost:5000"
3. Realiza tus solicitudes fetch o axios apuntando directamente a la ruta relativa (ejemplo: /api/usuarios) en lugar de la URL absoluta, permitiendo que el entorno de desarrollo redirija la petición de forma transparente sin activar las políticas CORS del navegador.