MSAL.JS Azure AD - CORS - No 'Access-Control-Allow-Origin' header is present on the requested resource.

[emadalsous]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ *] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Browser:

• Chrome version XX
• Firefox version XX
• IE version XX
• Edge version XX
• Safari version XX

Library version

Library version: @azure/msal-angular": "^0.1.4",

Current behavior

I am trying to authenticate to my web API which is hosted on App Service from another web app hosted on different domain and also hosted on app service. when i do a call the MsalInterceptor tries to log me in and then i get the error below on the browser
Access to XMLHttpRequest at 'https://login.microsoftonline.com/tenant_id/oauth2/v2.0/authorize?client_id=&redirect_uri=signin-oidc&response_type=id_token&scope=openid%20profile&response_mode=form_post&nonce=6370sdfj&state=sdfsdfds-sdfsdfsdf-sd-sdfsdf-T3qwNWW2jRHM&x-client-SKU=ID_NETSTANDARD2_0&x-client-ver=5.5.0.0' (redirected from 'web api call') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Expected behavior

The cors is enabled on my web api as i am able to make api calls without authentication. The issue appears only when i am authenticated. Could you please help me to figure it out ?

Minimal reproduction of the problem with instructions

[DarylThayil]

Thanks for reaching out
@jasonnutter is currently driving our angular update effort, will ping him to see if he has any context here.

[emadalsous]

Hello Dary, Jason,
Thanks for the reply. I found my mistake. I forgot to put the protectedResourceMap as i am doing CORS call (my web api is hosted in different domain than my website]:
export const protectedResourceMap:[string,
string[]][]=[ ['https://localhost:44521/EndPoint',['api://a88bb933-319c-41b5-9f04-eff36d985612/access_as_user']]];

Now i can access the web api. I still don't understand one thing. What is the following value:
['api://a88bb933-319c-41b5-9f04-eff36d985612/access_as_user']
from where do i have to get the GUID ? and what is access_as_user ? i am connecting to a custom web api that i developed ?

Could you please clarify me what to put in this field and if i put it null does that change anything in my case ?

Best regards,
Emad

[emadalsous]

Hello After more investigation it seems that i still have the CORS issue even if i added proctectedResourceMap. Any help ?

[jasonnutter]

@emadalsous Are you using the ADAL.net Identity Model extensions? https://github.com/AzureAD/azure-activedirectory-identitymodel-extensions-for-dotnet

The url you provided appears to have been generated from that library, not from @azure/msal-angular. Can you please provide more detail about how your application is configured?

Strings that look like api://a88bb933-319c-41b5-9f04-eff36d985612/access_as_user are custom web API scopes. You can read more about that here: https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-protected-web-api-app-registration#expose-an-api

[emadalsous]

Hello,

Thanks for the answer. I am using : Microsoft.AspNetCore.Authentication.AzureAD.UI to secure my Web API :
services.AddAuthentication(AzureADDefaults.AuthenticationScheme)
.AddAzureAD(options => Configuration.Bind("AzureAd", options));

The web api is hosted in different domain than the website. Effectively, the url i put here was token from an example. The url i used was exposed from custom expose api (unique-value):
https:///api-access

Below you find how did i configure my app:
1- App Service has .NET core 3 web API (Domain A),
2- App registration in Azure AD has the exposed API above,
3- Website has my SPA (Angular) core (Domain B),

Thanks in advance,
Emad

[emadalsous]

Hello Jason,

I found the reason behind this error. It's my bad. Our Web API was configured correctly. Using the following code to enable the authentication cause the problem:
services.AddAuthentication(AzureADDefaults.AuthenticationScheme)
.AddAzureAD(options => Configuration.Bind("AzureAd", options));

It seems not to validate correctly the token passed from the SPA page. So i had to use the code below to activate the authentication correctly:
services.AddAuthentication(AzureADDefaults.BearerAuthenticationScheme)
.AddAzureADBearer(options => Configuration.Bind("AzureAd", options));

Now the issue has been resolved. In my case the user was sending a token which wasn't validated so the web api redirect to login page of microsoft so the error CORS error occurs.

We can close this issue

Best regards,
Emad

[liben-y]

Hi @emadalsous, @jasonnutter,

I've got similar setup, where I have a web api and angular client which are on 2 web apps with different domains. I'm using MSAL library and am getting CORS errors specifically "No 'Access-Control-Allow-Origin' header is present on the requested resource".

I can't find any clear documentation that shows an example of how I need to set this up both on the server and the client.

Did you end up needing protectedResourceMap? And if so what values do you put in the keys as well as the values?

[jasonnutter]

@liben-y It sounds like your server is not setup to accept CORS requests. I would consult the documentation of the web server framework you are using to find out how to enable that so the server can accept CORS requests from the Angular app's domain.

[emadalsous]

Hello @liben-y ,

First you should make sure that your web api accept CORS request. This can be done on the startup file.

MSAL need protectedResourceMap if you want to make CORS calls. The key will be the url of the protected resource (for example: if you want to call https://www.apidomain.net/youcontrollerpath or the root path of your web api to enable it on the api level). The value needs to be defined on you Azure AD app registration in expose API section. See the following article to achieve this.

string[]][]=[ ['https://localhost:44521/EndPoint',['here is you created scope to access the web api']]];

MSAL send scopes to Azure AD authentication to tell it which resources the user tries to access.

I hope this can help you.

Best regards,
Emad

[liben-y]

Hello @liben-y ,

First you should make sure that your web api accept CORS request. This can be done on the startup file.

MSAL need protectedResourceMap if you want to make CORS calls. The key will be the url of the protected resource (for example: if you want to call https://www.apidomain.net/youcontrollerpath or the root path of your web api to enable it on the api level). The value needs to be defined on you Azure AD app registration in expose API section. See the following article to achieve this.

string[]][]=[ ['https://localhost:44521/EndPoint',['here is you created scope to access the web api']]];

MSAL send scopes to Azure AD authentication to tell it which resources the user tries to access.

I hope this can help you.

Best regards,
Emad

Sorry for the late response,
Thanks @emadalsous, I somehow managed to get it working locally and had further issues after I deployed the app to azure.

I then realized that the examples I was using updated and so did the msal libraries.

The issue I had when setting up CORS is, I needed to both set
AllowCredentials()
AllowAnyHeaders()

services.AddCors(options => { options.AddDefaultPolicy( builder => { builder.WithOrigins("http://localhost:4200" ) .AllowCredentials() .AllowAnyHeader() ; }); });

as well as

app.UseCors();

previously I was setting up CORS from app.UseCors

//app.UseCors(options => //{ // options.WithOrigins("http://localhost:4200") // .AllowCredentials() // .AllowAnyHeader(); //});
The msal angular library has also changed recently, I was only passing 1 set of configurations, but after updating to
"@azure/msal-angular": "^1.0.0-beta.2",
"msal": "^1.2.2-beta.0",

needed to provide 2 configurations, one of which contains the protectedResourceMap

Since I'm reading the values from config which I substitute values for during releases, I'm providing it via the following:
{ provide: MSAL_CONFIG, useFactory: msalConfigFactory },
{ provide: MSAL_CONFIG_ANGULAR, useFactory: msalAngularConfigFactory }

Works locally with the above, will see what happens when I deploy.