Efficient User

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 the angular application which is debugging mode.

I have received the following error in my browser’s console as

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I have started looking a solution to 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 the cross-origin problem.

It’s pretty straightforward, we have to update our server-side configuration with the following change. In my case, it’s my C# API project web.Config

<system.webServer>
<httpProtocol>
<customHeaders>
<add name=”Access-Control-Allow-Origin” value=”*” />
</customHeaders>
</httpProtocol>
<system.webServer>

This one tweak allows us to add this custom header to all our API requests and provides us to access in cross-origin too.

That’s it.

Happy Coding!