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

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

El error CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web que restringe las solicitudes HTTP realizadas desde un dominio (origen) hacia un servidor ubicado en un dominio diferente. Cuando tu aplicación frontend en JavaScript intenta consumir una API externa y el servidor no incluye las cabeceras de autorización adecuadas, el navegador bloquea la respuesta y muestra este error en la consola.

Causas principales del bloqueo CORS

Existen diversos motivos por los cuales tu petición puede ser rechazada por el navegador:

• Falta de las cabeceras HTTP Access-Control-Allow-Origin en el servidor.
• Intento de enviar credenciales (como cookies o tokens de autorización) sin la configuración previa del servidor.
• Solicitudes con métodos HTTP no permitidos (como PUT, DELETE o cabeceras personalizadas) que activan la petición preliminar OPTIONS (preflight request) y fallan.

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

La solución más limpia y recomendada es configurar tu servidor backend para que permita solicitudes desde tu origen frontend. Si utilizas Node.js con Express, puedes implementar el paquete oficial cors.

1. Instala el paquete CORS ejecutando el siguiente comando en tu terminal: npm install cors
2. Importa y utiliza el middleware en tu archivo principal de servidor (ej. server.js):

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

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

app.use(cors({ origin: 'https://tu-sitio-web.com' }));

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

Si estás desarrollando en local y no tienes acceso al código del servidor backend al que intentas conectarte, puedes evitar las restricciones CORS utilizando un proxy en tu entorno de desarrollo.

1. Si utilizas webpack-dev-server, abre tu archivo webpack.config.js y añade la propiedad devServer.proxy.
2. Configura el reenvío de peticiones para que imiten el mismo origen:

devServer: { proxy: { '/api': { target: 'https://api.externa.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } }

De esta forma, tu aplicación JavaScript hará peticiones a /api en tu propio servidor local, eliminando por completo el conflicto de origen cruzado en el navegador.