Cómo Solucionar el Error CORS (Access-Control-Allow-Origin) en JavaScript Paso a Paso

Introducción al Error CORS en el Desarrollo Web

Cuando estás desarrollando aplicaciones web modernas que separan el frontend del backend, es muy común encontrarse con el temido error CORS (Cross-Origin Resource Sharing). Este mecanismo de seguridad de los navegadores web bloquea las solicitudes HTTP realizadas desde un dominio, puerto o protocolo diferente al del servidor de recursos, arrojando en la consola errores como Access-Control-Allow-Origin. A continuación, exploraremos las causas principales y los métodos más efectivos para solucionarlo.

Causas Principales del Error CORS

El error CORS no es un fallo de programación en sí, sino una medida de seguridad implementada por los navegadores modernos (como Chrome, Firefox o Edge) basada en la política del mismo origen (Same-Origin Policy). Las causas más frecuentes incluyen:

• Intentar consumir una API desde un dominio de frontend distinto (por ejemplo, frontend en http://localhost:3000 y backend en http://localhost:5000).
• Falta de las cabeceras HTTP adecuadas en las respuestas del servidor backend.
• Peticiones con credenciales (cookies o tokens de autorización) sin la configuración previa requerida por el servidor.

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

La forma más limpia y recomendada de solucionar el error CORS es configurando tu servidor backend para que permita explícitamente las solicitudes desde tu origen de desarrollo o producción. Si utilizas Node.js y Express, puedes hacerlo utilizando el paquete oficial cors.

1. Instala el paquete CORS en tu proyecto backend ejecutando el siguiente comando en tu terminal:
   npm install cors
2. Importa y utiliza el middleware en tu archivo principal (ej. server.js o app.js):
   const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
3. Si necesitas restringir el acceso únicamente a tu dominio de frontend específico, configura el origen de esta manera:
   app.use(cors({ origin: 'http://localhost:3000' }));
4. Reinicia tu servidor backend y vuelve a probar la petición desde tu aplicación cliente.

Método 2: Implementar un Proxy en el Entorno de Desarrollo (Vite o React)

Si no tienes acceso para modificar el servidor backend o estás consumiendo una API de terceros, puedes evitar las restricciones CORS durante la fase de desarrollo configurando un servidor proxy en tu herramienta de empaquetado (como Vite o Webpack).

1. Abre el archivo de configuración de tu entorno de desarrollo (por ejemplo, vite.config.js).
2. Añade la sección de configuración para redirigir las peticiones API a través del servidor de desarrollo local:
   export default defineConfig({ server: { proxy: { '/api': { target: 'https://api.ejemplo.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } });
3. Modifica las llamadas HTTP en tu código JavaScript para que apunten a la ruta relativa (/api/recurso) en lugar de la URL absoluta.
4. Reinicia tu servidor de desarrollo para aplicar los cambios de manera inmediata.