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

Introducción al Error de CORS Policy en JavaScript

Uno de los dolores de cabeza más comunes para los desarrolladores web frontend al consumir APIs mediante la función fetch() o librerías como Axios es encontrarse con el temido mensaje en la consola del navegador: Access to fetch at 'https://api.ejemplo.com/datos' from origin 'http://localhost:3000' has been blocked by CORS policy. Este mecanismo de seguridad implementado por los navegadores bloquea las solicitudes de fuentes cruzadas por defecto.

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

El error de política de CORS (Cross-Origin Resource Sharing) no es un fallo de código, sino una medida de seguridad del navegador. Las causas principales incluyen:

• Intentar realizar una petición HTTP desde un dominio, puerto o protocolo diferente al de la API receptora.
• Falta de cabeceras HTTP de control de acceso (como Access-Control-Allow-Origin) en la respuesta del servidor backend.
• Envío de credenciales (cookies o tokens de autorización) sin la configuración adecuada en el cliente y el servidor.

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

La solución definitiva y recomendada para este problema es configurar el servidor que aloja la API para que permita peticiones desde tu origen. Si utilizas Node.js con Express, puedes hacerlo fácilmente instalando y configurando el middleware cors.

1. Instala el paquete ejecutando npm install cors en la terminal de tu proyecto backend.
2. Importa y utiliza el middleware en tu archivo principal (por ejemplo, server.js):

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

app.use(cors()); // Permite todas las solicitudes CORS
// O configura un origen específico:
// app.use(cors({ origin: 'http://localhost:3000' }));

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

Si estás desarrollando una aplicación frontend (por ejemplo, en React o Vue) y no tienes acceso al código del servidor backend para modificar las cabeceras CORS, puedes utilizar un proxy de desarrollo.

1. Si usas webpack-dev-server o Vite, configura la propiedad proxy en tu archivo de configuración (vite.config.js o vue.config.js).
2. Ejemplo para Vite:

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

Método 3: Configurar la Petición Fetch con el Modo Correcto

En algunos escenarios específicos donde consumes servicios públicos, asegurarte de enviar los parámetros correctos en el objeto de opciones de fetch puede mitigar problemas menores de interoperabilidad.

1. Abre el archivo JavaScript donde realizas la petición.
2. Asegúrate de configurar el parámetro mode adecuadamente:

fetch('https://api.ejemplo.com/datos', {
  method: 'GET',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.catch(error => console.error('Error:', error));