Al trabajar en una aplicación spa es muy habitual realizar llamadas a ciertas apis para recuperar información, guardar datos... Si desde una aplicación se realiza una llamada a una api que se encuentra en un dominio distinto es muy probable que tengas algún error de cors en tu navegador. Para solucionar en parte este problema voy a explicar en esta entrada como añadir un proxy (alojado en un servidor node.js) para añadir encabezados CORS y evitar así estos problemas.

Si no tienes muy claro el concepto de CORS dejo un enlace donde se explica en que consiste el mecanismo del CORS.

Recuerda que aunque se disponga de las cabeceras cors esto no significa que la llamada vaya a funcionar. Es posible que por ejemplo la api requiera una key, autenticación o que el servidor esté limitado a ciertos tipos de dominios. 

Si bien es cierto que existen soluciones con express.js añadiendo la opción de cors mediante un include yo voy a utilizar una aplicación para node.js que se llama cors-anywhere.

Os muestro a continuación como he instalado en mi servidor ubuntu 18.04 node.js, pm2 (gestor de aplicaciones node.js) y cómo he realizado ciertas modificaciones necesarias en el servidor nginx.

Instalar node.js

La instalación es sencilla, existen varios métodos de instalación pero yo he utilizado uno que permite tener una versión muy reciente. He instalado además ciertas bibliotecas que la propia instalación me sugería. Aquí están las instrucciones que he lanzado:

curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -
sudo apt-get install -y nodejs
sudo apt-get install gcc g++ make
curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

Y las versiones que se han instalado:

juan@server ~ $ npm -v
6.4.1
juan@server ~ $ nodejs -v
v10.12.0

Instalar PM2

Te dejo un enlace de mi entrada instalación pm2 donde explico como instalar este gestor.

Instalando cors-anywhere

Cors-anywhere es una aplicación node.js que va a realizar la función de servidor proxy para nuestras peticiones. Dispone de muy buena documentación indicando que modificaciones puedes realizar. Entre otras cosas permite:

- Disponer de una lista blanca para incluir direcciones que tendrán acceso al proxy

- Disponer de una lista negra para impedir el acceso al proxy a ciertas direcciones.

Puedes encontrar más información sobre cors-anywhere en su web

Para instalar cors-anywhere:

Se debe tener instalado npm (ya instalado con node.js).

Crear una carpeta (por ejemplo corsanywhere) y lanzar dentro de ella la instrucción:

npm install cors-anywhere

Quizás se muestren algunos errores pero lo importante es que la carpeta node-modules se haya creado con todo el código.

Crear un fichero (por ejemplo proxyCors.js) dentro de la carpeta corsanywhere o la carpeta que hayas creado.

Un fichero básico quedaría así:

Se pueden usar por ejemplo listas blancas y negras en el origen

En este caso es necesario desde la aplicación que estés realizando o desde Postman añadir la siguiente cabecera a la llamada.

Hay que tener en cuenta que es una configuración básica. Para probar en local esta configuración basta con arrancar la aplicación con:

node proyCors.js

Recibirás un mensaje de este estilo:

D:\proyectos\corsanywhere>node proxyCors.js
Running CORS Anywhere on localhost:8090

Salida en el navegador:

Distribución de ficheros:

Recuerda que puedes añadir más seguridad modificando las cabeceras, la lista blanca y negra. Dejo un enlace directo a la documentación cors-anywhere. 

¿Cómo desplegarlo en un servidor?

Como he comentado anteriormente yo tengo desplegado proxyCors en una aplicación node.js que corre como local y que es llamada desde el servidor nginx (funcionando como proxy inverso).

A continuación muestro el fragmento que he añadido en nginx para llamar a mi proxy cors.

No vamos a llamar a la api directamente. Mediante la llamada a proxycors se añadirán las cabeceras necesarias sin tener que programar nada. En nuestras aplicaciones tendríamos llamadas del estilo:

`https://www.juanonlab.com/proxycors/api.openweathermap.org:443/data/2.5/weather?q=${ciudad},${pais}&appid=${appId}`;

Esta petición ya incluye las cabeceras cors necesarias (excepto el origen) y nos evitará ciertos errores de cors. Recuerda que hay que añadir para esta llamada en concreto  en  las cabecera el par valor key - value haciendo referencia al origen existente en el originWhitelist.

Diagrama que muestra como se realiza la petición desde la spa a la api:

A partir de ahora podrás utilizar el proxy para realizar las llamadas a tus apis externas.