CORS Issues Fixing in Angular16 Application

Cross-Origin Resource Sharing (CORS) is a mechanism or a protocol that allows devices on one domain to access resources residing on other domains. Generally, for security reasons, browsers forbid requests that come in from cross-domain sources.

Cross-Origin Resource Sharing (CORS) is an essential security mechanism that restricts cross-origin requests made by web browsers.

CORS is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.

Here we will discuss in Angular Application how to resolve CORS issues and how to run application without any CORS issues.

How to fix CORS issues?

1. We can fix it by creating HTTP Interceptors by providing proper Headers .
2. Another way is by creating Proxy.conf.js file.

Let’s create an Angular application with standalone. And create HTTP Interceptors.

Inside interceptors file add this code

You can also configure a site to allow any site to access it by using the * wildcard. You should only use this for public APIs. Private APIs should never use *, and should instead have a specific domain or domains set. In addition, the wildcard only works for requests made with the crossorigin attribute set to anonymous, and it prevents sending credentials like cookies in requests.

Access-Control-Allow-Origin: *

Using the wildcard(*) to allow all sites to access a private API is a not preferable.

Some cases by adding headers won’t fix the CORS issues. On that time we have to add proxy server to resolve issues.

In global level add proxy.conf.js file

Inside that file we have to add the following code

After adding the proxy settings in proxy.conf.js file now we have to register that file in the angular.json file as follows

CORS Proxy allows us to bypass CORS errors using a proxy server that acts as a bridge between the client and the server. So, instead of requesting the target server, it sends the request to the proxy server instead. The request looks like this: https://proxy.com/https://server.com.

Adding a proxy.conf file can help during development, but it won’t resolve CORS issues from the server side. Server-side configurations and appropriate CORS headers are necessary to address and resolve CORS restrictions.

I hope you liked this!

“Enjoyed this article? Stay connected with me for more insightful content. Follow me on Twitter and Linkedin to receive updates on my latest articles, tutorials, and announcements. Let’s embark on this learning journey together and explore new ideas! Don’t miss out, follow me today!”