Use Angular Proxy To Easily Call External APIs

Photo by Markus Spiske on Unsplash

A long time ago, I created an AngularJS web application. It was a brand new front end app in a very large legacy web app. Because of the size of this legacy app, you wouldn’t want to run it on your local development machine as it consumes a lot of resources.

In production, my application would run along with the rest of the legacy app which includes a RESTful backend that my app consumes. During development, I obviously wanted to have Live Reloading even if the legacy app was running on a virtual machine in a remote computer lab. But my web app, running locally still needed to access those REST APIs.

Since I was too lazy to configure a proxy, I would change (hardcode) the URL of the APIs in my Angular services to access the REST API endpoints to point to the legacy app running remotely. The process was quick and easy (takes seconds) but it had at least two problems:

1. It was easy to forget to undo the source code change before committing files to source control, running the risk of pushing code that only runs on our internal network to production.
2. I had to run a browser with security disabled. That enabled me to avoid CORS and same-origin errors, since the APIs were on a different host.

I didn’t want to remain in the stone-age, so I looked for a better solution. I wondered if Angular provided a way to proxy my HTTP requests to an external server. A quick online search introduced me to the “proxy-config” option in the angular CLI. You simply use it like this:

ng serve --proxy-config ./config/proxy.config.json

where proxy.config.json is the file where you specify the host where your APIs are, plus other options. When you run the above command, the CLI will display the following, among other things:

... Proxy created: /myapi -> https://pedro.internal.lab:9443

The hostname comes from the configuration file. Let’s start with a configuration file that has only a few options:

Simple proxy.config.json file

The above file specifies that any HTTP request that starts with path /myapi/ will be sent to the proxy which will redirect it to the hostname specified in the target property.

The secure option is to enforce usage of SSL. In my case, although I do use SSL, my server has a self-signed certificate, so I set it to false. Otherwise, the proxy will reject those backend responses.

Just keep in mind that we can use a proxy file like this only during development (ng serve). When I compile for production, I will use a command like this:

ng build --prod --base-href=/myapp/

where there’s no reference to the proxy configuration file and it’s not even allowed.

The changeOrigin option set to true as above overrides the default behavior of keeping the origin of the host header. In our case we don’t want to keep the origin of the HTTP header because we’re connecting to a different host.

Note that your APIs can also be on localhost on a different port. In that case, your target is simply something like http://localhost:8080.

You can also specify HTTP Headers in your configuration file. The proxy will send these headers with each request. This was another thing that I have hardcoded before for development purposes. We had some internal APIs that needed Basic Authentication. So we simply added a configuration like this:

You see the new headers property with the Authorization header and its corresponding value. I only needed this one header, but you could include more than one. Also, you’re not limited to specifying only one API server. Say you specify a file like this:

In this case, there are three paths that get redirected by the proxy to a different host. Note that only one injects a header and that the last one goes to the same host as the first one, but a different port.

There is one thing you need to be aware of. If you change this file, you will need to restart your application for the changes to take effect. In other words, stop and re-run the ng serve command.

This feature is provided by Webpack, like many others in the build/compile process of Angular.

To know more about proxy-config in the Angular CLI, go here.

For a complete list of the options and detailed descriptions, go to the Webpack documentation here.

Now you know how to elegantly point to all those APIs that you can’t run (or don’t want to) on your own machine. Or you can ignore this blog post and ask the powers that be for a more powerful machine to run them all locally ;-)

For more Angular goodness, be sure to check out the latest episode of The Angular Show podcast.

NG-Conf is coming March 20 & 21, 2024.

Hear top community speakers, experts, leaders, and Angular team members present for 2 stacked days on everything you need to make the most of Angular in your applications.

Learn more here >> https://ng-conf.org/