Mastering Angular proxy configuration

JM Robles
3 min readOct 25, 2020
Is proxy.conf.js weird? No! It’s fun!

TL;DR: How to configure your Angular project to use a backend while your are developing in local mode.

Rarely you have to develop an isolate Angular app. The normal thing is that it has access to a backend and/or consumes one or more APIs.

Then, you starts the development in your local computer and when you write your service for access to the backend or API, and access with your browser to http://localhost:4200...

Surprise! Probably you have a CORS problem… (at least)

WTF can’t access to my backend!

Angular CLI provides a solution to bypass these problems: reverse proxy server.

Enable the Angular Proxy

To use the angular proxy you need to define a configuration file and pass it when invoking.

We use the following proxy.confas base template.

With this simple configuration, any request which its URL starts with “/api”, it’s reversed proxy to “http://my-backend.com/api…”. In example, “/api/v1/login” is proxied to “http://my-backend.com/api/v1/login”.

We set the logLevel to “debug” to view each request, secure to “false” (to no check https requests) and changeOrigin to true (change the Host header with the target host).

Now we need to start the development server with the use of the proxy.

ng serve --proxy-config proxy.conf.js

You can also modify your package.json to use with npm run start.

Let’s start with the special cases.

Case 1: The backend path is not the same like your app

In this case, you have a backend running at localhost:8000 and on your angular you have specified the path prefix “/api".

--

--

JM Robles

Backend / Platform engineer #go #python #kubernetes #terraform #devops