In this Angular tutorial, we are going to learn how to handle the Cross-Origin Resource Sharing (CORS) issue in Angular applications when using API or resources accessed from another origin. We will manage the proxy configuration setting in the Angular application.
What is CORS?
Cross-origin resource sharing known as CORS is the management of communication between 2 or more resources placed at multiple origins or domains. This could be the access of different types of resources including CSS, JS, API Rest services or event other Angular application which are running on localhost but different PORTS.
When we face CORS issue in Angular application?
By default, when we start an Angular application, it is served at HTTP:localhost:4200 with 4200 PORT. In this case, if you try to access a RESTFull API service from a backend server that is on some other PORT like HTTP:localhost:3000, then you will face a CORS issue.
How to Fix the CORS issue in Angular applications?
We need to enable CORS for the resources we want to access using Proxy Configuration settings in Angular.
Step 1) Create proxy.config.json file
At the root of the Angular project, create a proxy.config.json file. Suppose you have a backend server and another Angular project running on the following URL’s
Backend Server at http://localhost:3000/api
Other Angular Application running at http://localhost:4500
To enable CORS, update your proxy.config.json file with the following:
{
"/api/*": {
"target": "http://localhost:3000",
"secure": false,
"logLevel": "info"
},
"/myotherapp/*": {
"target": "http://localhost:4500",
"secure": false,
"logLevel": "info"
}
}Methods to Use Defined Proxy Configuration
There two methods to apply our Proxy configuration in the Angular project.
Method 1) Update angular.json file
open the angular.json file root, then register the "proxyConfig" with our proxy.config.json file under "architect > serve > options > proxyConfig" as shown below:
Method 2) Update "start" script in package.json file
As a quick go, open package.json file and update the “start” script from
"start": "ng serve"to
"start": "ng serve --proxy-config proxy.config.json"Here we added the --proxy-config flag ending with the proxy file path.
After making either of the above change, now you just need to start your application by hitting $ npm start.
Now Cors are enabled to access resourced kept on some other port. You can easily access them from the application with proxy configuration running on 4200 from the following URLs
https://locahost:4200/api [ actually running on 3000]
or
https://localhost:4200/myotherapp [ actually running on 4500]
Conclusion
Finally, we have configured proxy settings in our Angular application to resolve the CORS issue. You can add any number of whitelisted URL in the proxy.config.json files to access their resources without any issue. You can also run multiple Angular standalone applications from the same port which are actually running on different ports.
