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

Introducción al Error CORS en el Desarrollo Web

Durante el desarrollo de aplicaciones web modernas, es muy común encontrarse con el temido bloqueo de CORS (Cross-Origin Resource Sharing). Este mecanismo de seguridad de los navegadores web impide que una página realice peticiones a un dominio, puerto o protocolo distinto al que sirvió la aplicación original, protegiendo al usuario de posibles ataques maliciosos. Sin embargo, para los desarrolladores, esto suele traducirse en un dolor de cabeza cuando intentamos conectar nuestro frontend (por ejemplo, en React o Vue) con nuestra API backend (Node.js, Express, etc.).

Causas Principales del Bloqueo CORS

• Realizar peticiones AJAX desde un origen diferente (ej. http://localhost:3000 a http://localhost:5000) sin la autorización del servidor.
• Falta de cabeceras HTTP específicas como Access-Control-Allow-Origin en la respuesta del servidor.
• Uso de métodos HTTP avanzados (PUT, DELETE) u opciones personalizadas que activan una petición previa de tipo OPTIONS (preflight request) y el servidor la rechaza.

Método 1: Configurar CORS en un Servidor Node.js con Express

La forma más rápida y recomendada de solucionar este problema en el lado del servidor si utilizas Node.js con Express es instalando y configurando el paquete oficial cors.

1. Abre tu terminal en la carpeta del proyecto backend e instala el paquete mediante npm:
   npm install cors
2. Abre tu archivo principal del servidor (usualmente server.js o app.js).
3. Importa el módulo y utilízalo como middleware antes de declarar tus rutas:
   const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
4. Si deseas restringir el acceso únicamente a tu dominio de producción, configura los permisos de la siguiente manera:
   const corsOptions = { origin: 'https://tudominio.com', optionsSuccessStatus: 200 };
app.use(cors(corsOptions));

Método 2: Configurar Cabeceras HTTP Manualmente sin Librerías

Si no estás utilizando un framework y prefieres configurar las respuestas HTTP nativas de Node.js, puedes añadir las cabeceras manualmente en cada respuesta de tu servidor.

1. Localiza el archivo donde manejas las rutas o el middleware global de respuestas.
2. Agrega las siguientes líneas al inicio de tus cabeceras de respuesta (Headers):
   res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
3. Asegúrate de interceptar y responder correctamente cuando el método de la petición sea OPTIONS para permitir el preflight del navegador.

Método 3: Uso de un Proxy Inverso durante el Desarrollo (Frontend)

Si no tienes acceso para modificar el código del servidor backend al que intentas conectarte (por ejemplo, una API externa de terceros), puedes configurar un proxy en tu entorno de desarrollo frontend.

1. Si utilizas Vite, abre tu archivo vite.config.js y añade la propiedad server.proxy:
   export default defineConfig({ server: { proxy: { '/api': { target: 'https://api.ejemplo.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } });
2. Si utilizas React con Create React App, añade la propiedad "proxy": "https://api.ejemplo.com" directamente dentro de tu archivo package.json.