Configuración de proxy angular

Vamos a suponer que tenemos una app que llama a diferentes REST API al momento de desarrollar entonces lo que tenemos que hacer es configurar un proxy en nuestro proyecto Angular.

¿Cómo configurar el proxy en la aplicación Angular para conectarse a la API que se ejecuta en un puerto diferente?

Suponiendo que tiene una API ejecutándose en: http://localhost:3000

Normalmente llamaríamos directamente a la API con un método que retorne la respuesta del servicio.

callApi(){
    this.http.get('http://localhost:3000/api/getData').subscribe(response => {
      console.log('response is ', response);
    })
  }

Con el uso del PROXY de Angular logramos que cualquier llamada HTTP que comience con /api/se redirija a nuestro servidor y puerto. Tomando un ejemplo del caso anterior, una llamada a se redirigirá automáticamente a: http://localhost:3000/api/getData

callApi(){
    this.http.get('/api/getData').subscribe(response => {
      console.log('response is ', response);
    })
  }

En la raíz de nuestro proyecto vamos a crear un nuevo archivo llamado proxy.conf.json y agregamos lo siguiente.

{
    "/api/*": {
      "target": "http://localhost:3000",
      "pathRewrite": {"^/api" : ""}
    }
  }

Ahora todas las llamadas a /api/getData se reescriben a: http://localhost:3000/getData

Para hacer que la aplicación Angular use la configuración de proxy, debe especificarla mientras ejecuta la aplicación Angular.

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

Conclusión

Puedes usar este proxy para ayudarle a tu app a no escribir el codigo en todas las llamadas HTTP de esta manera tendras mas control de a que servidor tiene que acceder tu app.