Cómo Solucionar el Error CORS en JavaScript de Forma Definitiva

¿Qué es el error CORS en JavaScript y por qué ocurre?

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 solicitudes HTTP realizadas desde un script ejecutado en el cliente (como JavaScript con fetch o axios) hacia un dominio, puerto o protocolo diferente al que sirvió la página original.

Cuando el servidor de destino no incluye los encabezados HTTP adecuados que indiquen al navegador que permite solicitudes de otros orígenes, el navegador bloquea la respuesta y muestra el temido error en la consola de desarrollo: Access to fetch at '...' from origin '...' has been blocked by CORS policy.

Causas principales del bloqueo CORS

• Realizar peticiones desde un entorno de desarrollo local (ej. http://localhost:3000) a una API de producción (ej. https://api.midominio.com).
• Falta de los encabezados HTTP Access-Control-Allow-Origin en el servidor backend.
• Envío de credenciales (cookies o cabeceras de autorización) sin la configuración previa requerida por el servidor y el cliente.
• Uso de métodos HTTP no permitidos (como PUT o DELETE) que disparan una petición de verificación previa (preflight request con el método OPTIONS).

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

La solución más limpia y recomendada para producción es configurar tu servidor backend para que acepte peticiones del origen de tu aplicación frontend. Si utilizas Node.js con Express, puedes hacerlo fácilmente instalando y configurando el paquete cors.

1. Instala el paquete 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. app.js o server.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, configura las opciones de la siguiente manera:
   const corsOptions = { origin: 'https://tu-frontend-sitio.com' };
app.use(cors(corsOptions));

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

Si estás desarrollando localmente y no tienes acceso para modificar el código del servidor backend al que estás consultando, puedes configurar un proxy inverso en tu herramienta de empaquetado (como Vite, Webpack o React Scripts) para enrutar las peticiones como si vinieran del mismo origen.

1. Si usas Vite, abre tu archivo vite.config.js y añade la propiedad server.proxy:
   export default defineConfig({ server: { proxy: { '/api': { target: 'https://api.externa.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } });
2. Modifica tus llamadas en JavaScript para que apunten a la ruta relativa (ej. fetch('/api/recurso')) en lugar de la URL completa. De esta forma, el navegador creerá que la petición es del mismo origen y el servidor proxy se encargará de evitar la restricción CORS.