Blazor WebAssembly 和 Azure 函數身份驗證

Question

我已經部署了一個 API（具體來說是 Azure Function 應用程序）並在其上啟用了 Azure AD。

你可以在這里測試： https://shoppingcartlist-api.azurewebsites.net/api/shoppingcartitem

我還部署了一個 Blazor WASM 應用程序，可以在這里找到： https://shoppingcartlist.azurewebsites.net/

如果沒有在 Function 應用程序上啟用 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' header。 如果不透明的響應滿足您的需求，請將請求的模式設置為“no-cors”以獲取禁用 CORS 的資源。

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對於 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啟用 CORS 到您的 blazor Z2567A5EC9705EB7AC2CZ 應用程序 DZ 使用以下命令：

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

要在 Azure 門戶中為 Function 應用程序啟用 CORS 策略：

1. 將您的域添加到允許的來源，以便特定域將訪問此 API 或全部允許，使用“*”並從列表中刪除所有其他來源。
2. 完成后，單擊保存。
3. 現在您可以從任何域或指定的源域訪問此 API 並且瀏覽器不會拋出 CORS 錯誤。

有關更多信息和示例，請參閱以下參考資料：

4. Web 服務 API Blazor CORS 錯誤

5. .Net Blazor WASM CORS 異常

6. Web 應用程序啟用 CORS 策略