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.
With the above change in place, When I go ahead and run the app, it will look like
Now, this looks nice. Hope you have liked this article. Thanks for joining me.
4,992 total views, 6 views today