Blazor WebAssembly 和 Azure Functions 身份验证

Question

我已经部署了一个 API（具体来说是 Azure Function App）并在其上启用了 Azure AD。

你可以在这里测试：https://shoppingcartlist-api.azurewebsites.net/api/shoppingcartitem

我还部署了一个 Blazor WASM 应用程序，可以在这里找到：https://shoppingcartlist.azurewebsites.net/

如果未在 Function App 上启用 Azure AD，则导航到“获取数据”时它可以正常工作。完成后，我收到以下消息：

访问 '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') 来自原点“https://shoppingcartlist.azurewebsites.net”已被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头出现在请求的资源。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

这应该是一个简单的 Blazor 应用程序，但是，我需要一些指导来了解我是否缺少 Azure 部署级别的一些设置，这会导致这个 CORS 问题，或者我是否需要部署 Blazor WASM为 Azure AD 集成和配置完全配置的应用程序，以便导航该特定错误。

Answer 1

如MS Doc 中所述，您必须使用以下代码在端点路由上启用 CORS：

app.UseCors();

并在 Startup.cs 的 ConfigureServices Method 中添加 CORS Policy 选项：

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");
});
});

Web 应用程序需要完全配置并在 Azure 门户中使用 CORS 策略：

或

您可以使用 Azure CLI 使用以下命令为您的 blazor Web 应用启用 CORS：

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

在 Azure 门户中为函数应用启用 CORS 策略：

1. 将您的域添加到允许的来源，以便特定域将访问此 API 或允许所有域，使用“*”并从列表中删除所有其他来源。
2. 完成后，点击保存。
3. 现在您可以从任何域或指定源域访问此 API，并且浏览器不会抛出 CORS 错误。

有关更多信息和示例，请参阅以下参考资料：

4. Web Service API Blazor CORS Error

5. .Net Blazor WASM CORS Exception

6. Web Apps enabling CORS Policy