“No 'Access-Control-Allow-Origin' header is present” for redirected request to https://login.microsoftonline.com/

Question

I\'m trying to get response with an access code and getting:

XMLHttpRequest cannot load \"h...://login.microsoftonline.com/d331431b-899c-4666-8094-e82

Answer 1

Remove the last slash in your url "http://localhost"

Answer 2

The issue is because you're trying to call the /api/auth/aad OAuth route via Ajax instead of linking to it directly in your page.

You can't call the AAD OAuth route via Ajax since the url it redirects to that's used to capture the clients authorization (https://login.microsoftonline.com/..) doesn't allow CORS as indicated in the error that you're seeing.

This isn't a ServiceStack CORS issue which you don't need in order to talk to your local API's (i.e. http://localhost:23589) since its hosted in the same domain as the HTML page. CORS (Cross-origin resource sharing) is needed when using Ajax to access a resource outside of the domain (i.e. https://login.microsoftonline.com/..) which since it doesn't allow CORS will not let you access that url via Ajax.

Answer 3

As mythz explained in his answer, CORS is not allowed from your originating domain. You are, however, allowed to register your application with Microsoft Azure(?) Active Directory so that it can display a separate login dialog that will return a callback to your application as soon as authentication succeeds.

For more information about the AAD login flow (mind you, this is a NodeJS example, not bare javascript, but the same logic applies) check out Getting started with Azure AD.