Handling CORS with ASP.NET Core and Angular 4 Appication

Hi Friends,

In this section, we will talk about about handling CORS issue with ASP.NET CORE and Angular 4 application. As part of Authentication, this app uses Windows Authentication. I have created app using ASP.NET Core 2 Angular template and then using the application. Application structure looks like

Now, If I run the app, then it will look like

Now, everything is fine with this. But presentation wise its not very pleasing as in this is just the default template provided by Microsoft. On top of that, I have made this. However, it would be nice, if I can split this app as presentation layer and app layer means one layer which will have good looking UI and that will consume its services to populate the data in actual UI.

For that, I have created another solution, which looks like this.

Now, If I run the same, it looks like

Now, this kind of UI looks professional and pleasing to eye as well. So far so good. Now, the problem came when I tried to consume my APIs say http://localhost:62166/api/employee. Before that, I have provided my Base URL as my app URL like

And, then my service looks like

After that, I have also made corresponding server side changes in server side code like

And then used the same like

After that, I have applied the same policy at controller level so that all methods will have access to that like

With the above change in place, when I go ahead and run the app, it will give me below error. Typical CORS error.

In order to fix the same, there is one more change is needed. The problem is cookies are not getting sent over with the request. Hence, we need to send cookies as well like shown below.