Cómo Solucionar el Error CORS 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 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 ataques maliciosos como el robo de datos o CSRF.

Cuando intentas consumir una API externa utilizando fetch() o axios desde tu aplicación frontend alojada en http://localhost:3000 hacia un servidor en https://api.midominio.com sin la configuración adecuada, el navegador bloquea la respuesta y muestra el temido mensaje en la consola: Access to fetch at '...' from origin '...' has been blocked by CORS policy.

Causas principales del bloqueo por políticas CORS

• Ausencia de cabeceras HTTP de control de acceso en el servidor de destino.
• Intento de enviar credenciales (como cookies o tokens de autorización) sin la configuración permitida.
• Peticiones con métodos HTTP no permitidos (como PUT, DELETE o cabeceras personalizadas) que activan una solicitud previa o preflight request (OPTIONS) fallida.
• Diferencias estrictas en el protocolo (HTTP vs HTTPS), el dominio o el puerto de origen.

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 directamente tu servidor backend para que permita solicitudes desde los orígenes deseados. Si estás utilizando Node.js y Express, puedes utilizar el middleware oficial cors.

1. Instala el paquete CORS en tu proyecto backend ejecutando el siguiente comando en tu terminal:
   npm install cors
2. Importa y habilita el middleware en tu archivo principal (por ejemplo, app.js o server.js):
   const cors = require('cors');
const express = require('express');
const app = express();
3. Configura los orígenes permitidos de manera segura:
   const corsOptions = { origin: 'http://localhost:3000', optionsSuccessStatus: 200 };
app.use(cors(corsOptions));

Método 2: Implementar un proxy inverso en el entorno de desarrollo

Si estás desarrollando una aplicación frontend (por ejemplo, utilizando React, Vue o Angular con Vite o Webpack) y no tienes acceso al código del servidor backend para modificar las cabeceras CORS, puedes utilizar un proxy de desarrollo.

1. Si utilizas Vite, abre tu archivo de configuración vite.config.js y añade la propiedad server.proxy dentro de defineConfig:
2. Configura el reenvío de peticiones para engañar al navegador:
   server: { proxy: { '/api': { target: 'https://api.midominio.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }
3. Realiza tus peticiones en JavaScript apuntando directamente a la ruta relativa /api/recurso en lugar de la URL absoluta del servidor externo. Esto evitará por completo el bloqueo CORS durante la fase de desarrollo local.