Microsoft-authentication-library-for-js: Access to fetch at 'https://login.microsoftonline.com/<tenantid>/oauth2/v2.0/authorize' (redirected from 'https://localhost:44368/api/values') from origin 'client domain' has been blocked by CORS policy

[kunalkankariya]

Library

• [x] `@azure/[email protected]

Trying to access a custom .NET API hosted in local using IIS express (localhost) and secured with Azure AD using a Single page client application that uses msal-browser for authentication. I get the following error

Access to fetch at 'https://login.microsoftonline.com//oauth2/v2.0/authorize?client_id=xxx4f96-a766-4ec18f91802c&redirect_uri=https%3A%2F%2Flocalhost%3A44368%2F&response_mode=form_post&response_type=id_token&scope=openid%20profile&state=OpenIdConnect.AuthenticationProperties%3xxxxx&nonce=xxxxDJmMmJiMjkx&x-client-SKU=ID_NET461&x-client-ver=5.4.0.0' (redirected from 'https://localhost:44368/api/values') from origin '' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Steps to reproduce

1. Register a azure ad app. Use the quickstart to download the sample from the registered app in the azure portal.

2. This downloads the sample code from https://github.com/AzureADQuickStarts/AppModelv2-WebApp-OpenIDConnect-DotNet with the required config values like client id, tenant id and redirect URI (localhost:44368).

Update the same redirect URI localhost:44368 in the azure ad app registration as well. Add a scope user_impersonation and under implicit grant id tokens is enabled.

Make the required changes to the code downloaded like adding a sample API controller, changes to global.asax to register webapiconfig, decorating the sample controller with Authorize attribute also add EnableCors attribute with origin as SharePoint top level site URL ( Tried with all origins (*) as well).

The api when accessed via browser works fine. asks the user to authenticate and returns response on successful authentication

Create a client app and, add the msal authentication code to access the API.

From the fiddler trace I see the following:

The API endpoint is called successfully with a bearer token. This results in a response "{"Message":"Authorization has been denied for this request."}". This also results in a 302 redirect to the authorization endpoint for a ID token

https://login.microsoftonline.com/oauth2/v2.0/authorize?client_id=xxx&redirect_uri=https%3A%2F%2Flocalhost%3A44368%2F&response_mode=form_post&response_type=id_token&scope=openid%20profile

This redirect results in the error mentioned above. ( CORS issue)

MSAL Config

const msalConfig: msal.Configuration = {
auth: {
clientId: "xxx",
authority:
"https://login.microsoftonline.com/"tenant id"",
redirectUri:
"client application url",
},
system: {
iframeHashTimeout: 10000,
loggerOptions: {
loggerCallback: (level, message, containsPii) => {
if (containsPii) {
return;
}
switch (level) {
case msal.LogLevel.Error:
console.error(message);
return;
case msal.LogLevel.Info:
console.info(message);
return;
case msal.LogLevel.Verbose:
console.debug(message);
return;
case msal.LogLevel.Warning:
console.warn(message);
return;
}
},
},
},
};

Browsers/Environment

• [x] Chrome

[pkanher617]

@kunalkankariya Could you please follow the template and include your msal configuration and a code snippet? It's not immediately clear that this is a JS issue.

For one thing, the quickstart you are downloading isn't even a Javascript or Typescript quickstart.

Access to fetch at 'https://login.microsoftonline.com//oauth2/v2.0/authorize?client_id=xxx4f96-a766-4ec18f91802c&redirect_uri=https%3A%2F%2Flocalhost%3A44368%2F&response_mode=form_post&response_type=id_token&scope=openid%20profile&state=OpenIdConnect.AuthenticationProperties%3xxxxx&nonce=xxxxDJmMmJiMjkx&x-client-SKU=ID_NET461&x-client-ver=5.4.0.0' (redirected from 'https://localhost:44368/api/values') from origin '' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

The error you are receiving is also clearly coming from the .NET library. I recommend taking a look at their docs and repo to ensure you are using the quickstart correctly: https://github.com/AzureAD/microsoft-authentication-library-for-dotnet.

[derisen]

Also, there are several JS code samples that work with a .NET web api, as shown here, here and here.

[kunalkankariya]

@pkanher617 ,

Apologies if I didn't clearly specify the details. I have updated the original issue. I have two apps, one is a .NET WEB API secured with Azure AD authentication using OWIN and OpenIDConnect. The other is a client application (Single page app) that uses msal-browser to access this API.

I am able to get the access token but when I try to access the API endpoint using the bearer token I get redirected to the authorize endpoint to get the ID token with this error.

Also, in the steps to reproduce, I have just specified the way to create the Test .net web API.

[kunalkankariya]

@derisen ,

Thank you for the samples. I reckon they use the implicit flow and I am using the auth code grant flow using msal-browser. Also, I have been able to use the msal-browser to call the graph API without any issue. I was now trying to access a custom .net web api.

[derisen]

@kunalkankariya you're welcome : ) the second one is using msal-browser so it should cover your case. It's not clear from your post but In general I would recommend using separate app registrations for your spa and web api -your issue might be that both apps use localhost:* for redirect uri but with different platforms (web, spa).

[kunalkankariya]

@derisen ,

Thank you.

I already have two app registrations. One for the Web API (web) and one for the client which is a JavaScript SPFx webpart (SPA). WebAPI uses localhost as redirect URI and the SPA client app registration uses the sharepoint URL as redirect URI.