Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) 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. Su objetivo es restringir las solicitudes HTTP que se realizan desde un dominio (origen) hacia un servidor ubicado en un dominio diferente, protegiendo así a los usuarios contra ataques de falsificación de peticiones en sitios cruzados (CSRF).

Cuando intentas consumir una API desde tu aplicación frontend en JavaScript (usando fetch() o axios) y el servidor de destino no incluye los encabezados HTTP adecuados para autorizar tu origen, el navegador bloquea la respuesta y muestra el temido mensaje en la consola: Access to fetch at 'URL' from origin 'http://localhost:3000' has been blocked by CORS policy.

Causas principales del bloqueo CORS

• El servidor backend no incluye el encabezado Access-Control-Allow-Origin en su respuesta.
• La solicitud utiliza métodos HTTP no permitidos (por ejemplo, PUT o DELETE) sin la debida autorización preflight (OPTIONS).
• Se envían credenciales (como cookies o tokens de autorización) sin configurar correctamente el intercambio de datos seguros.

Método 1: Configurar los Encabezados HTTP en el Servidor (Node.js / Express)

La solución más robusta y definitiva consiste en configurar el servidor backend para que permita explícitamente las solicitudes desde tu dominio frontend. Si utilizas Node.js con Express, puedes hacerlo de forma manual o utilizando el paquete oficial cors.

1. Instala el paquete cors en tu proyecto ejecutando el siguiente comando en tu terminal:
   npm install cors
2. Importa y configura el middleware en tu archivo principal de servidor (por ejemplo, app.js o server.js):
   const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
3. Si deseas restringir el acceso únicamente a tu dominio de producción, puedes personalizarlo de la siguiente manera:
   const corsOptions = { origin: 'https tusitio.com' };
app.use(cors(corsOptions));

Método 2: Utilizar un Proxy Inverso durante el Desarrollo (Vite / Webpack)

Si estás desarrollando en local y no tienes acceso al código del backend para modificar los encabezados CORS, puedes configurar un proxy en tu herramienta de empaquetado o entorno de desarrollo, como Vite o Webpack Dev Server.

1. Abre el archivo de configuración de tu entorno, por ejemplo, vite.config.js.
2. Agrega la sección server.proxy para redirigir las peticiones locales hacia el servidor de la API:
   export default { server: { proxy: { '/api': { target: 'https://api.servidor-externo.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } };
3. Realiza tus peticiones en JavaScript apuntando a la ruta local /api en lugar de la URL externa completa, evitando así cualquier restricción CORS en el navegador.