How to resolve CORS errors by using Angular Proxy?

First of all, there is one very important question for all: what is a proxy, and why should we use it? Proxies act as intermediaries between clients and servers, helping to manage requests and add layers of privacy and security. For those looking to enhance security and authenticity, you might even consider options to buy ISP proxies, which use real residential IPs to reduce the risk of detection. Another key question is, how can we implement a proxy in our Angular app? In this article, we’ll describe all the details and provide simple, easy ways to overcome the CORS issue using proxy configuration in an Angular application, complete with an example.

Problem Statement

When we integrate API’s into our angular application on our local development environment then we face some CORS policy issues. Due to this CORS Policy issue or we can also call it cross origin issue, we fail to implement such API’s. Please check the below-given screenshot for your reference –

How to resolve CORS errors by using Angular Proxy?

As you can see in the above screenshot, we are trying to http GET request in above test URL as follows.

Explore our expertise on > > > Python Development Services

Please read carefully and follow the proper steps that I have mentioned below to fix this CORS issue.

Step 1

Firstly create a proxy.conf.json file in the src folder in your angular application.

Step 2

Now we have to create the proxy configuration for API endpoints. So add your proxy configuration in your proxy.conf.json file as given in the below format-

Definition of parameters is given below-

1. "/echo” is your API Path.

2. "target" is your domain name where your API’s are hosted.

3. "secure" is boolean type parameter, if your domain has SSL then you should use true else you should use false as value.

4. "changeOrigin" should be true if your backend is not hosted on localhost server.

5. “logLevel" is used to check whether proxy is working or not. Proxy log levels are info (the default), debug, warn, error, and silent.

Step 3

Now you have to put proxy.conf.json path in proxyConfig option in angular.json file just like mentioned below.

Step 4

Now finally we have to update our API path in our service file. Before Proxy we were using https://reqbin.com/echo/get/json URL. But now we do not want to write domain name here in URL because we have already configured domain name https://reqbin.com for the route of "/echo" in our proxy.conf.json file.

Step 5

Finally, you have to restart your project with the ng server command and if we look at the Chrome Dev Tools network tab, we can see that the request came from http://localhost:4200/echo/get/json