Solucionando conflictos de CORS al acceder a la API del Banco Central de Argentina

Si estás intentando utilizar la API del Banco Central de Argentina desde el front-end de tu sitio web, es posible que te encuentres con un problema de seguridad conocido como CORS. En pocas palabras, CORS es una medida de seguridad implementada por los navegadores web para evitar que una página web haga solicitudes a un servidor desde un dominio diferente al que el servidor está configurado para permitir.

Hace un tiempo hice un video de YouTube en mi canal on the code sobre cómo consumir la API del BCRA con Javascript, pero al recibir consultas sobre cómo resolver el problema de CORS sin utilizar una extensión del navegador (que era lo que estaba haciendo en mi vídeo), decidí crear un proxy para solucionar este problema.

Primero te dejo el video, no olvides suscribirte a mi canal! subo contenido periodicamente.

Como consumir la API del BANCO CENTRAL DE ARGENTINA utilizando FETCH | Javascript - YouTube

En este video vemos de forma practica como consumir la api del banco central de Argentina!En caso de obtener un error de CORS se soluciona descargando y acti...

youtube.com

Antes de seguir no te olvides de suscribirte a mi canal, subo contenido regularmente.

Todo esto de CORS es muy común en las aplicaciones web modernas, ya que a menudo utilizan múltiples servidores y dominios diferentes. Afortunadamente, existe una solución simple para este problema: usar un proxy.

Un proxy es básicamente un servidor que actúa como intermediario entre tu aplicación y el servidor que estás intentando acceder. En otras palabras, en lugar de hacer una solicitud directa al servidor, haces la solicitud al proxy, y el proxy hace la solicitud al servidor en tu nombre. Esto permite que la solicitud provenga del mismo dominio que tu aplicación, evitando conflictos con CORS.

En mi caso, quería acceder a la API del Banco Central de Argentina desde mi sitio web, por lo que creé un proxy para solucionar el problema de CORS. No dudes en utilizar el proxy! acá te comento como hacerlo:

Te muestro un ejemplo para acceder a la cotización del USD, aunque con el proxy se puede acceder a cualquier información que ofrezca la api del BCRA.

Acá te dejo el link a la API: https://estadisticasbcra.com/api/documentacion

const apiUrl = "usd";
const proxyUrl = "https://bcra-proxy-cors.vercel.app";

fetch(`${proxyUrl}/${apiUrl}`, {
  headers: {
    Authorization:
      "BEARER TOKEN",
  },
})
  .then((response) => response.json())
  .then((data) => console.log(data))

Este código utiliza fetch para hacer una solicitud GET a la API del Banco Central de Argentina.

1. En la primera const apiUrl, especificamos la información a la que nos gustaría acceder. No es necesario escribir la URL completa de la solicitud, de eso se encarga el Proxy. Por lo tanto, solo se debe escribir exactamente lo que se desea acceder (en este caso "usd").

2. En la segunda const proxyUrl, especificamos la URL del proxy. Desplegué el proxy en Vercel, ya que siempre me ha dado muy buenos resultados y es gratuito.

3. En los headers de la petición, debemos especificar el token BEARER como una cadena de caracteres. Este token se obtiene al registrarse en la API.

Mejor sería hacer lo mismo con async-await try-catch ;)

  const fetchData = async () => {
   const apiUrl = "usd";
   const proxyUrl = "https://bcra-proxy-cors.vercel.app";

   try {
      const response = await fetch(`${proxyUrl}/${apiUrl}`, {
      headers: {
              Authorization:
              "BEARER TOKEN",
            },
          });

      const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error(error);
        }
      };

      fetchData();

Eso es todo lo que necesitas hacer para utilizar el proxy y evitar todo conflicto con CORS. ¡Que la pasen bien!

Saludos!!

Pablo.