CORS Origin problem in C# Angular application

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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s