CORS issues when using Azure AD in ASP.Net Core and Angular2 min read

Recently, I wrote a post about using Azure Active Directory (AD) as authentication mechanism for a single page application written in Angular. It also consumed ASP.NET Core 2.0 as API layer an we saw how to wire up the whole thing end to end.

In my approach I redirected user to Azure from client side, however, there are other ways you can follow in which the user is redirected from server to Azure login page. In such cases you might struggle with cross origin resource sharing aka CORS issues as it will be required for the application to behave properly. 


The reason for that is because another domain is trying to call your API for token generation purposes. So if you don’t enable the CORS the authentication will not be successfully done.

To allow CORS we need to add the header “Access-Control-Allow-Origin” to the requests. There are two ways we can enable it, globally or on certain requests.

Configure the CORS policy

Before going deeper into those, you will need to configure the CORS in your ConfigureServices method on your Startup.cs:

I prefer the policy over just enabling CORS because it gives us more control to be able to explicitly specify when do we want to enable it.

Now that you’ve done configuring let’s see both ways, I mentioned earlier. For enabling the CORS globally, you can use the middle-ware available in Microsoft.AspNetCore.Cors NuGet package:

It is very important to call the middle-ware before adding MVC as otherwise it will not work, since the request gets terminated by MVC pipeline.

The second way (also my preferred option) is to add it the controller we need (e.g. login controller):

It’s all done. Your application now supports CORS and the authentication will be successful.

Refine the policy

If you paid attention to the policy you will find out that we are enabling the CORS for all domains, all headers and all methods. This is can lead to security issues later on, so let’s refine this to just allow that from Azure AD and not other domains.

In the policy you just need to set the domain instead of using AllowAnyOrigin:

This makes sure that our API’s are only available to the specified domain rather than any domain which is much more secure.

Hope this helps resolving the issue you’re facing.


Spread the love

4 Replies to “CORS issues when using Azure AD in ASP.Net Core and Angular2 min read

  1. This has driven me up the wall for an entire day. I’m worried It’s going to take more. I have done this, and I still get the CORS issue. Even setting to allow all domains.


    1. Happy to help out Tim, any chance I could have a look at the setup?


  2. Like @Tim this has been driving me up the wall too.

    Instead of the Angular SPA authenticating directly with Azure AD I want the authentication do be done similar to a standard MVC app where the authentication is initiated by the server and then also validated by the server (so I can check if the user is also from a licenced tenant, has an assigned license and then add some custom claims to the token before it is returned to the client). The server code also requests a token for accessing the MS Graph API and is cached on the server.

    I found your post and have tried what you suggest but still get the CORS issue when Azure AD redirects via a 302. I’m picking I need to format my request so its treated as a ‘simple request’ and hence doesn’t need the preflight request but I can’t figure out how to do this.

    Any help most appreciated.


    1. Technically if you are doing the authentication on server side you will need to enable CORS on your server code. In case of .net core:

      app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); where you can replace allow all with specific domain.


Leave a Reply