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 que se realizan 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 conectar tu aplicación frontend (por ejemplo, en http://localhost:3000) con una API alojada en otro dominio (como https://api.tudominio.com) sin los permisos adecuados, el navegador bloquea la respuesta y muestra el temido error en la consola: Access to fetch at '...' from origin '...' has been blocked by CORS policy.

Causas Principales del Bloqueo CORS

• Falta de cabeceras HTTP de control de acceso en el servidor backend.
• Intento de enviar credenciales (como cookies o tokens de autorización) sin la configuración requerida.
• Peticiones con métodos HTTP no permitidos (por ejemplo, PUT o DELETE) cuando solo se permiten GET o POST.
• Configuración incorrecta del entorno de desarrollo entre puertos distintos de localhost.

Método 1: Solucionar CORS en el Servidor Backend con Node.js y Express

La forma más rápida y limpia de solucionar este problema si estás utilizando Express.js en tu backend es instalando y configurando el middleware oficial cors.

1. Instala el paquete ejecutando el siguiente comando en tu terminal: npm install cors
2. Importa y utiliza el middleware en tu archivo principal de servidor (ej. app.js o server.js):
3. const express = require('express'); const cors = require('cors'); const app = express(); // Habilitar CORS para todas las rutas app.use(cors()); app.get('/api/data', (req, res) => { res.json({ message: '¡CORS solucionado con éxito!' }); }); app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));

Método 2: Configurar Cabeceras Personalizadas Manualmente

Si no puedes utilizar librerías de terceros, puedes configurar manualmente las cabeceras HTTP en las respuestas de tu servidor para permitir orígenes específicos.

1. Ubica el archivo de rutas o controlador de tu API.
2. Añade las siguientes cabeceras antes de enviar la respuesta JSON:
3. app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); next(); });

Método 3: Configurar un Proxy en el Frontend durante el Desarrollo

Si estás desarrollando una aplicación con React, Vue o Angular y no tienes acceso al código del servidor backend, puedes evitar el bloqueo CORS configurando un proxy de desarrollo.

1. Si usas React (Webpack), añade la propiedad proxy en tu archivo package.json:
2. "proxy": "https://api.tudominio.com"
3. Realiza tus peticiones directamente a la ruta relativa (ej. fetch('/api/data')) en lugar de usar la URL completa. El entorno de desarrollo redirigirá la petición saltándose la política CORS del navegador.