Do you know how to resolve CORS issues in Angular?

Photo by Benjamin Lyngsø on Unsplash

Hi all, today I am sharing my experience on CORS issues and how to handle them in a client-side angular app. Before starting this topic I will give you all a brief knowledge about CORS and how CORS is used for managing external resources.

What do you mean by CORS?

CORS stands for Cross-Origin Resource Sharing. It is a mechanism that is used to bypass the same-origin policy so that resources from one origin can access resources from another origin in a secure manner.

How does CORS manage requests from an external domain?

CORS manages request from the external domain by using a set of newly created HTTP headers which are as follows -

Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Allow-Headers
Access-Control-Allow-Methods
Access-Control-Expose-Headers
Access-Control-Max-Age
Access-Control-Request-Headers
Access-Control-Request-Method
Origin

Why do we get CORS issue or rather say why does CORS issue occurs?

CORS issue occurs in web application if your backend server (your service) is running on a different domain and it is not configured properly.

Note: Even if your backend server is running on a localhost with a different port it is treated as a different domain.

So CORS issues may occur while developing an angular application.

How to fix CORS issues?

We can fix cross issues in two way:

• One way to fix it is by enabling proper CORS headers request on the server-side.
• Another way is to configure Angular CLI proxy.

Note: The correct approach or solution is to configure the backend server, but that may not always be feasible. One reason is common the front end development environment may not have access to the backend server code.

What is Angular CLI?

The Angular CLI is a command-line interface tool to automate our development workflow. It is use to initialize, develop, scaffold, and maintain angular applications.

What is Angular CLI Proxy?

Angular CLI proxy works as an intermediate between the browser and our backend server. Once configured disables cross-origin restrictions.

Let us see how we can fix CORS issues with Angular CLI proxy.

Let’s create an Angular application as shown below with some code to send server-side request to spring boot application running on port 4200

angular app

let us use another spring boot application running on port 8090 as shown below to configure proxy.

Spring boot app

Next, create a proxy configuration file under the src folder as shown.

proxy.conf.json

Note: “target”: “http://localhost:8090" is the server side application and it will be different for different servers. and secure is set to false as we are running the server in http schema that is in non secure mode

Below is the screen of my sample angular proxy.conf.json file.

proxy.conf.json

Next, add proxyConfig key to the angular.json file as shown below.

Add it under “serve” key “options” key as a new key value pair entry. Below is the screen of my sample angular angular.json file.

angular.json

Finally, we can run the angular app using the serve command with Angular CLI proxy enabled as shown below.

ng serve

Note : ng run may throw this error -

ng : The term ‘ng’ is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.

In this case, you need to add the %AppData%\npm under “environment variable” “System variables” path

Another alternative is to run the below command

npm run ng serve

Once successfully the command is run, we can test the server API by hitting localhost:4200/API from browser. If it's not having any issue it will return the test API value. Below is the screen of my sample angular application.

angular app with proxy to test server API

Ran the same API from the server host as shown below.

spring-boot app with the test API

Hope this will help my fellow developers who are facing CORS issue while developing angular app and don't have access to backend server and need to proceed with their development work.

Please share your feedback whoever reads this content, this will in a way encourage me.

References: https://angular.io , https://en.wikipedia.org/wiki/Proxy_server

Also please check this article which has amazing content on angular – https://materialize-thoughts.com/how-to-use-ai-name-generator-api/