Blazor WebAssembly and Azure Functions Authentication

Question

I have deployed an API (Azure Function App to be specific) and have enabled Azure AD on it.

You can test that here: https://shoppingcartlist-api.azurewebsites.net/api/shoppingcartitem

I have also deployed a Blazor WASM app which can be found here: https://shoppingcartlist.azurewebsites.net/

Without enabling Azure AD on the Function App, it works fine when you navigate to 'Fetch Data'. After doing it though, I am getting the message below:

Access to fetch at 'https://login.windows.net/9584ea77-7ce5-4acd-9ce8-dff81c8d0f84/oauth2/v2.0/authorize?response_type=code+id_token&redirect_uri=https%3A%2F%2Fshoppingcartlist-api.azurewebsites.net%2F.auth%2Flogin%2Faad%2Fcallback&client_id=fdbbde4e-12a6-4162-beb3-23967e750fbb&scope=openid+profile+email&response_mode=form_post&nonce=78ba850e8f9f42ccb5532b62d6d619f9_20220120004015&state=redir%3D%252Fapi%252Fshoppingcartitem' (redirected from 'https://shoppingcartlist-api.azurewebsites.net/api/shoppingcartitem') from origin 'https://shoppingcartlist.azurewebsites.net' has been blocked by CORS policy: 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.

This is meant to be a simple Blazor app, however, I would like some guidance as to whether I am missing some settings at the Azure Deployment level, which is causing this CORS issue, or if I need to deploy a Blazor WASM app fully configured for Azure AD Integration and configurations in order to navigate that particular error.

Answer 1

As mentioned in the MS Doc, you have to enable CORS on the endpoint routing using the below code:

app.UseCors();

and Add the CORS Policy options in ConfigureServices Method of Startup.cs:

builder.Services.AddCors(options =>
{
options.AddPolicy(name: "MyPolicy",
builder =>
{
builder.WithOrigins("
"https://appname.azurewebsites.net",
"https://localhost:7071",
"https://localhost:55143")
.WithMethods("PUT", "DELETE", "GET");
});
});

And the Web App needs to be fully configured and with the CORS Policy in the Azure Portal also:

OR

You can use the Azure CLI to enable CORS to your blazor web app using this command:

az webapp cors add --resource-group myResourceGroup --name <app-name> --allowed-origins 'http://localhost:5000

To enable CORS Policy for the Function App in the Azure Portal:

1. Add your domain the allowed origins so that specific domains are going to access this API or to allow all, use "*" and remove all other origins from the list.
2. Once it is done, click on Save.
3. Now you can access this API from any domain or specified origin domain and the browser won't throw up the CORS error.

For more information and examples, please refer the below references:

4. Web Service API Blazor CORS Error

5. .Net Blazor WASM CORS Exception

6. Web Apps enabling CORS Policy