Configurar Proxy en Angular CLI

¿Cómo configurar tu proxy en Angular CLI para consumir diferentes API’s?

Configurando Proxy en Angular CLI

En este post aprenderás como configurar tu proyecto con Angular CLI para consumir API’s de tu Backend y así evitar tener que lidiar con los encabezados CORS.

Por lo general en un entorno de desarrollo es necesario probar la funcionalidad de los servicios que consumimos, por lo que podemos hacer uso de mocks servers o bien del propio servicio a consumir, por lo que probablemente tengamos un servicio con múltiples endpoints, o bien tengamos que consumir varios servicios en diferentes puertos y dominios.

¿Qué es un proxy?

En palabras generales, un proxy sirve como una puerta de enlace entre nuestra aplicación e internet. Es un servidor intermedio entre el cliente y los servicios a consumir.

En Angular utilizamos un proxy para desarrollo pero esta configuración únicamente es aplicable para este entorno, no es para producción.

Funcionamiento de un servidor proxy llamado desde la ruta /api

Las configuraciones que veremos son únicamente para desarrollo, no debe usarse en producción ya que no es su funcionamiento. Ya que para esto hay soluciones enfocadas para el ambiente de producción como lo es servir la aplicación directamente desde el backend o bien desde un servidor Apache o Nginx.

Configuración

Para configurar nuestro servidor proxy localmente necesitaremos crear un archivo llamado proxy.conf.json el cual podemos crear en la raíz de nuestro proyecto o bien en otro lado fuera del proyecto (Esto por si quieres manejar diferentes branchs o tags para ese archivo especifico, es muy útil para poder moverte en base a tus tags y branchs del proyecto en general).

Tenemos diferentes maneras de configurar el inicio de la aplicación con esta configuración:

• Directo en la linea de comandos: al iniciar nuestra aplicación desde la terminal podemos agregar el siguiente flag --proxy-config para versiones anteriores a V8 (--proxy-conf)

ng serve --proxy-config proxy.conf.json

• package.json: podemos evitar escribir el comando anterior cada vez que queremos iniciar nuestra aplicación simplemente modificando nuestro package.json

"scripts": {
  "start": "ng serve --proxy-config proxy.conf.json"
}

• proxyConf: dentro de nuestro archivo angular.json

...
  "architect": {
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "your-application-name:build",
        "proxyConfig": "proxy.conf.json"
      },
...

O bien si nuestro archivo es angular-cli.json sería de la siguiente manera:

...
  "defaults": {
    "styleExt": "sass",
    "component": {},
    "serve": {
      "proxyConfig": "proxy.conf.json"
    }
  }
...

proxy.conf.json

Opciones

• target: Se define la url de nuestro backend.
• pathRewrite: Es el nombre que usaremos para invocar el servicio.
• changeOrigin: Si nuestro backend no se esta ejecutando localmente debemos cambiar el valor a true.
• logLevel: Para comprobar que todo funcione correctamente debemos indicar el valor en debug.
• bypass: Si se necesita omitir opcionalmente el proxy o bien cambiar la solicitud antes de mandarla, se debe definir la configuración en un archivo proxy.conf.js

Configuración para proxy opcional

• Proxy Coorporativo: Si trabajas detrás de un proxy corporativo, la configuración regular no funcionará, es decir si intentas hacer llamadas a cualquier URL fuera de su red local no podrás. En este caso, puede configurar el proxy para redirigir las llamadas a través de su proxy corporativo utilizando un agente:

npm install --save-dev https-proxy-agent

Configuración para proxy coorporativo

Reescribiendo la ruta de la URL

Si necesitamos cambiar nuestra ruta hacia el endpoint del backend puesto que alguno de estos cambió utilizaremos la opción pathRewrite que nos permite redireccionar nuestra llamada a un endpoint.

Supongamos que tenemos nuestro backend localmente corriendo en el puerto 3000 y las llamadas queremos que sucedan hacia ese servidor ocurran desde nuestra aplicación mediante el endpoint /api, es decir localhost:4200/api tendríamos que agregar a nuestro archivo proxy.conf.json lo siguiente:

Configuración proxy pathRewrite

Si fuera el caso de que el backend se ejecuta en un entorno externo utilizaríamos:

Configuración proxy changeOrigin

Múltiples entradas a un endpoint

En ocaciones tenemos múltiples módulos con servicios en nuestra aplicación que llamarán al mismo servicio externo (API). En ese caso, necesitaremos definir un archivo proxy.conf.js en lugar de proxy.conf.json

Multiples entradas un solo endpoint

Múltiples entradas con múltiples endpoint

Pero que ocurre cuando por ejemplo tenemos que consumir información de múltiples endpoint, diferentes backends en diferentes puertos o microservicios. Tenemos una solución para esto:

Múltiples entradas con múltiples endpoint

NOTA: Después de cada edición en el archivo proxy.conf.json, recuerda reiniciar el servidor local de tu aplicación para que los cambios sean efectivos, es decir ejecutar nuevamente ng serve .

Para más referencia puedes visitar la documentación oficial de Angular y la documentación oficial de Angular CLI.

Follow me on Medium or Twitter!, Si te gusto dale clap a la manita para saber que estoy haciendo las cosas bien, y déjame tus comentarios!!!