Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) en JavaScript 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 mecanismo restringe las peticiones HTTP realizadas desde scripts hacia un dominio diferente al que sirvió la página original, previniendo así ataques de secuestro de sesión y robo de datos.

Cuando intentas consumir una API externa utilizando fetch() o axios y el servidor de destino no incluye los encabezados HTTP adecuados, el navegador bloquea la respuesta y muestra en la consola un mensaje como: Access to fetch at 'https://api.ejemplo.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy.

Causas principales del error CORS

• Falta de los encabezados HTTP Access-Control-Allow-Origin en el servidor backend.
• Intento de enviar credenciales (como cookies o tokens de autorización) sin la configuración adecuada en el cliente y el servidor.
• Bloqueo de peticiones de tipo OPTIONS (peticiones preflight) por parte del servidor.
• Configuración incorrecta del entorno de desarrollo local (puertos distintos entre frontend y backend).

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

La forma más robusta y recomendada de solucionar el error CORS es configurando el servidor que recibe las peticiones para que permita el acceso desde tu dominio frontend.

1. Instala el paquete oficial de CORS en tu proyecto de Node.js ejecutando el siguiente comando en tu terminal: npm install cors
2. Importa y utiliza el middleware en tu archivo principal de Express antes de definir tus rutas:

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());

Si necesitas restringir el acceso únicamente a un origen específico, puedes configurar las opciones de la siguiente manera:

const corsOptions = { origin: 'http://localhost:3000', optionsSuccessStatus: 200 };
app.use(cors(corsOptions));

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

Si no tienes acceso al código del servidor backend y necesitas evitar el bloqueo CORS mientras desarrollas en tu entorno local, puedes configurar un proxy inverso en tu herramienta de empaquetado (como Vite o React Scripts).

1. Si utilizas Vite, abre tu archivo de configuración vite.config.js.
2. Añade la sección server con la propiedad proxy para redirigir las peticiones:

export default defineConfig({ server: { proxy: { '/api': { target: 'https://api.ejemplo.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } });

3. Modifica tus peticiones en JavaScript para que apunten a la ruta relativa /api en lugar de la URL completa externa. El servidor de desarrollo se encargará de enrutar la petición omitiendo las restricciones del navegador.