Azure Functions部署至Azure与Blazor WASM集成：HttpClient配置及调用咨询

一、配置HttpClient（Blazor端） #

在Blazor WASM项目的Program.cs里，通过IHttpClientFactory注册并配置指向Azure Functions的HttpClient，以此实现相对路径调用：

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

// 注册专属HttpClient，绑定Functions的相对API根路径
builder.Services.AddHttpClient("FunctionClient", client =>
{
    // 基于当前Blazor应用的基地址，拼接Functions默认的/api前缀
    client.BaseAddress = new Uri($"{builder.HostEnvironment.BaseAddress}api/");
});

await builder.Build().RunAsync();

注意：如果你的Function App修改了默认的API路由前缀（不是/api），这里要替换成对应的路径。

二、在Blazor组件中调用Function #

1. 注入HttpClient工厂 #

在需要调用Function的组件顶部注入IHttpClientFactory：

@inject IHttpClientFactory HttpClientFactory

2. 编写调用逻辑 #

在组件代码块里实现调用方法，直接用相对路径访问目标Function：

private async Task CallMyFunction()
{
    var client = HttpClientFactory.CreateClient("FunctionClient");
    
    // 这里的"GetData"是你的Function名称（对应HTTP触发的路由）
    var response = await client.GetAsync("GetData");
    
    if (response.IsSuccessStatusCode)
    {
        var result = await response.Content.ReadAsStringAsync();
        // 处理返回结果，比如绑定到页面元素
    }
    else
    {
        // 处理请求失败，比如提示用户
    }
}

3. （可选）添加访问密钥 #

如果你的Function启用了密钥验证，需要在请求头中添加密钥：

client.DefaultRequestHeaders.Add("x-functions-key", "你的Function访问密钥");

三、跨域访问配置（CORS） #

如果Blazor应用和Functions部署在不同域名下，必须在Azure Portal的Function App中配置CORS：

• 进入Function App的API > CORS页面
• 添加Blazor应用的完整域名（本地调试可加https://localhost:5001）
• 保存配置即可

内容的提问来源于stack exchange，提问作者Vijay