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.
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:
For more information and examples, please refer the below references:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.