Cómo Solucionar el Error CORS en JavaScript y APIs Paso a Paso

¿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. Este sistema restringe 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 o CSRF.

Cuando intentas consumir una API externa utilizando fetch() o axios desde tu frontend en JavaScript y el servidor de destino no incluye las cabeceras HTTP adecuadas, el navegador bloquea la respuesta y muestra el temido mensaje en la consola: Access to fetch at 'URL' from origin 'URL' has been blocked by CORS policy.

Causas principales del bloqueo CORS

• Falta de las cabeceras HTTP de control de acceso en el servidor backend (como Access-Control-Allow-Origin).
• Intento de realizar peticiones con credenciales (cookies, tokens de autorización) sin la configuración previa en el cliente y servidor.
• Falta de respuesta a las solicitudes preliminares o de prueba tipo OPTIONS (preflight requests).

Método 1: Configurar las cabeceras CORS en el servidor backend (Node.js/Express)

La solución más robusta y recomendada para producción es configurar el servidor que aloja la API para que permita explícitamente las solicitudes desde tu dominio. Si utilizas Node.js con Express, puedes implementar el paquete oficial cors.

1. Instala el paquete ejecutando el siguiente comando en tu terminal:
   npm install cors
2. Importa y habilita el middleware en tu archivo principal de servidor (ej. server.js o app.js):
   const cors = require('cors');
const express = require('express');
const app = express();
app.use(cors());
3. Si deseas restringir el acceso únicamente a tu dominio de frontend específico, configura las opciones de la siguiente manera:
   app.use(cors({ origin: 'https://tu-dominio-frontend.com' }));

Método 2: Utilizar un proxy inverso durante el desarrollo local

Si estás desarrollando una aplicación localmente (por ejemplo, usando React, Vue o Vite en localhost:3000) y consumes una API de terceros que no puedes modificar, configurar un proxy de desarrollo es la solución ideal para saltar la restricción del navegador.

1. Si usas Vite, abre tu archivo vite.config.js y añade la propiedad server.proxy dentro de defineConfig:
   export default defineConfig({ server: { proxy: { '/api': { target: 'https://api.externa.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } });
2. Realiza tus peticiones en JavaScript apuntando a la ruta relativa en lugar de la URL completa:
   fetch('/api/recurso').

Método 3: Configurar el cliente Fetch con modos alternativos (Solo casos específicos)

En ocasiones, si estás intentando consumir recursos públicos que no requieren intercambio complejo de datos y solo necesitas lectura simple, puedes ajustar los parámetros de la solicitud en el cliente.

1. Asegúrate de no enviar cabeceras personalizadas complejas que fuercen una solicitud preflight si el servidor no está preparado.
2. Revisa que el modo de la petición sea el adecuado (aunque por defecto es cors, cambiarlo a no-cors solo te dará respuestas opacas que no permiten leer el cuerpo del JSON, por lo que los Métodos 1 y 2 son siempre los preferidos).