Cómo Solucionar el Error 'CORS Policy' en JavaScript Fetch API Paso a Paso

Introducción al Error de CORS en JavaScript

Cuando desarrollamos aplicaciones web modernas utilizando JavaScript y la API Fetch, es muy común encontrarnos con el temido error en la consola del navegador relacionado con la política CORS (Cross-Origin Resource Sharing). Este mecanismo de seguridad implementado por los navegadores bloquea las peticiones realizadas desde un dominio (origen) hacia un servidor diferente, a menos que el servidor de destino conceda permisos explícitos.

¿Cuáles son las Causas del Error CORS Policy?

El error de CORS ocurre principalmente por las siguientes razones técnicas:

• Diferencia de Orígenes: El protocolo, el puerto o el dominio de tu aplicación web frontend difiere del servidor backend al que intentas realizar la petición.
• Falta de Cabeceras HTTP: El servidor de la API no incluye las cabeceras de respuesta necesarias, como Access-Control-Allow-Origin.
• Peticiones Preflight (OPTIONS): En solicitudes complejas (como POST, PUT o con cabeceras personalizadas), el navegador envía primero una petición de comprobación OPTIONS que el servidor no sabe cómo responder.

Método 1: Configurar las Cabeceras CORS en el Servidor (Backend)

La solución más recomendada y segura es configurar el servidor backend para que permita solicitudes desde el origen de tu frontend. Si estás usando Node.js con Express, puedes hacerlo fácilmente instalando y configurando el paquete cors.

1. Instala el paquete CORS en tu proyecto de Node.js 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):
   const cors = require('cors');
const app = express();
app.use(cors());
3. Si necesitas restringir el acceso únicamente a tu dominio de producción, configura las opciones de la siguiente manera:
   app.use(cors({ origin: 'https,://tusitio.com' }));

Método 2: Utilizar un Servidor Proxy Inverso para Desarrollo Local

Si estás desarrollando en local y no tienes acceso al código del servidor backend que consumes, puedes evitar la política CORS utilizando un proxy inverso. Si utilizas herramientas modernas como Vite o Webpack en tu frontend, esto se configura de forma muy sencilla.

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 la API externa:
   export default defineConfig({ server: { proxy: { '/api': { target: 'https://api.ejemplo.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } });
3. Modifica tus peticiones en JavaScript para que apunten a tu ruta local en lugar de la URL externa:
   fetch('/api/datos') .then(response => response.json()) .then(data => console.log(data));

Método 3: Configurar el Modo 'no-cors' (Solo para Casos Específicos)

La API Fetch de JavaScript permite pasar un objeto de configuración con la propiedad mode: 'no-cors'. Sin embargo, debes utilizar esta opción con precaución, ya que tiene limitaciones severas.

1. Añade el parámetro de modo en tu llamada a la función fetch:
   fetch('https://api.ejemplo.com/datos', { mode: 'no-cors' })
2. Ten en cuenta que al usar no-cors, la respuesta será de tipo opaque, lo que significa que el navegador impedirá que tu código JavaScript lea el cuerpo de la respuesta o acceda a los datos devueltos por el servidor. Esta solución solo sirve si solo necesitas enviar datos sin esperar una respuesta legible.