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

¿Qué es el Error de CORS y por qué ocurre?

El error de CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web que restringe las solicitudes HTTP realizadas desde un script hacia un dominio diferente al que sirvió la página original. Aunque protege contra ataques de falsificación de peticiones, suele frustrar a los desarrolladores durante la integración de front-end y back-end.

Causas Principales del Error CORS

• El servidor API no incluye las cabeceras HTTP necesarias (como Access-Control-Allow-Origin).
• Intentar realizar una petición AJAX desde un origen local (file:// o http://localhost) a un servidor remoto sin permisos.
• Uso de métodos HTTP no permitidos o envío de credenciales (cookies/tokens) sin la configuración adecuada.

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

La solución más robusta y recomendada es configurar tu servidor backend para que permita solicitudes desde el origen de tu aplicación front-end.

1. Instala el paquete CORS en tu proyecto de Node.js ejecutando npm install cors en tu terminal.
2. Importa y habilita el middleware en tu archivo principal (ej. server.js o app.js):

const cors = require('cors');

app.use(cors());

Si deseas restringir el acceso únicamente a tu dominio de producción, puedes configurarlo de la siguiente manera:

app.use(cors({ origin: 'https, //tudominio.com' }));

Método 2: Usar un Servidor Proxy para Desarrollo Local

Si no tienes acceso al código fuente del servidor backend y necesitas probar tu aplicación frontend de manera local, puedes configurar un proxy en tu herramienta de desarrollo.

1. Si utilizas React con Vite o Webpack, abre tu archivo de configuración (ej. vite.config.js).
2. Agrega la sección de proxy para redirigir las peticiones y evitar el bloqueo del navegador:

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

De esta forma, las peticiones saldrán desde tu propio servidor de desarrollo local, omitiendo las restricciones de CORS del navegador.