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)
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".
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
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
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
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?
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 :)