Mastering Angular proxy configuration

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 “…”. In example, “/api/v1/login” is proxied to “”.

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".

We need that the proxy remove the prefix “/api" to pass the request to your backend.

For this task we just define the pathRewrite property to rewrite the path. In this case, we remove the “/api” prefix.

Or if for example our target backend has the prefix “/api-dev”, the pathRewrite will be:"^/api": "/api-dev" .

Case 2: The remote server set cookie secure and or only http

Nowadays almost the services use secure HTTP protocol (aka HTTPS).

If the server is properly configured, the session cookie will have the flag only-http and secure enabled.

This case is a bit more complicated. We need to intercept the response and rewrite the Set-Cookie response header.

Look at the following example.

What we do here is simple remove the word “secure” of the Set-Cookie header.

Actually with onProxyRes we can modify anything we want from the response.

Case 3: The remote server not accept some headers

Sometimes some backend server like as Tomcat doesn’t accept specific CORS headers such as the Origin header.

The only thing that we need to do is remove the header before send the request.

With this, bye bye to the “Invalid CORS” error message ;)

Case 4: The remote server sets a cookie path different

This scenario rarely occurs. The target backend specify a cookie path, but it’s not apply to ours paths if for example we use pathRewrite .

It’s easy peasy. Just specify the match path and how to rewrite it.

Beyond the cases

Can’t find the solution to your situation?

No problem!

As you know, Angular use Webpack to provide the local development server functionality. And Webpack uses node-proxy-middleware to provide the reverse proxy functionality.

So that, you can take a look into node-proxy-middleware documentation to get a list of all available options.

A lot of options, right?

I hope it has been useful and now do not be afraid to correctly configure your Angular proxy so that the development of your project is agile.

Please, if you liked it, give it a round of applause. And if you want to know more about DevOps, Kubernetes, Docker, etc … follow me :)

Thanks so much!!!

CTO @ & Beyond-Full-stack developer #go #python #kubernetes

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store