I’ve been working on some personal project which is built using angular and C#
The front end is built with Angular and backend (actually API) is built using C#
So technically both project has been deployed in different folders in my case.
Whenever I’m debugging and calling my API which is also running in debugging mode of local environment everything fine.
When I’ve deployed my API in IIS and tried access from angular application which is debugging mode.
I have received the following error in my browsers console as
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
I have started looking solution for this problem. I have started adding various headers in my angular httpclient, nothing works.
Later, found that we have to add access control header in server side. By default angular support and provides all the necessary things we need. So we don’t need to anything in angular application side
Then found a configuration which needs to be done in server side to avoid cross origin problem.
Its pretty straight forward, we have to update our server side configuration with following change. In my case it’s my C# API project web.Config
<add name=”Access-Control-Allow-Origin” value=”*” />
This one tweak allows us add this custom headers to all our Api requests and provides us to access in cross origin too.