Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) en JavaScript y APIs Definitivamente

¿Qué es el Error CORS y por qué ocurre en el Desarrollo Web?

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, desarrollada en React o Vue en http://localhost:3000) con un backend independiente (como Node.js o PHP en http://localhost:5000), el navegador bloquea la respuesta si el servidor de la API no incluye las cabeceras HTTP adecuadas que permitan explícitamente dicho acceso.

Causas Principales del Bloqueo CORS

• Ausencia de las cabeceras HTTP de control de acceso (Access-Control-Allow-Origin) en la respuesta del servidor.
• Intentar enviar credenciales (como cookies o tokens de autorización) sin la configuración adecuada en el cliente y el servidor.
• Uso de métodos HTTP no permitidos (como PUT o DELETE) en peticiones de origen cruzado sin la verificación previa (solicitud preflight OPTIONS).

Método 1: Configurar las Cabeceras CORS en el Servidor (Node.js con Express)

La forma más limpia y recomendada de solucionar este error es habilitar CORS directamente en tu servidor backend. Si utilizas Node.js con Express, puedes instalar el paquete oficial cors para gestionar estas políticas de manera automática.

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 configuración del servidor (por ejemplo, server.js o app.js):

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!' }); });
app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));

Método 2: Configuración Manual de Cabeceras HTTP (PHP o Servidores Nativos)

Si no utilizas un framework que provea un paquete automatizado, debes inyectar manualmente las cabeceras necesarias al inicio de tus scripts en el servidor antes de enviar cualquier contenido.

1. Abre el archivo principal de tu API o endpoint (por ejemplo, api.php).
2. Añade las siguientes líneas de código PHP antes de procesar la petición:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");

Nota: Cambiar el asterisco * por un dominio específico (ej. https://tuweb.com) es mucho más seguro para entornos de producción.

Método 3: Uso de un Proxy Inverso en Desarrollo (Vite o Webpack)

Si no tienes acceso para modificar el código del servidor backend al que estás consultando, puedes configurar un proxy en tu herramienta de desarrollo frontend para evitar las restricciones del navegador.

Si utilizas Vite, abre tu archivo vite.config.js y añade la propiedad proxy:

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