Blazor 使用 HttpClient 调用 Web API 教程

来源：这里教程网时间：2026-02-21 17:36:11 作者：

Blazor 中使用

HttpClient

调用 Web API 是最常用的数据交互方式，关键在于正确配置服务、处理跨域、管理生命周期，并做好错误应对。

注册并注入 HttpClient 服务

Blazor WebAssembly 和 Blazor Server 的注册方式略有不同，但都推荐使用命名客户端（Named Client）或类型化客户端（Typed Client）来提升可维护性。

在
Program.cs
（.NET 6+）中注册命名客户端：

builder.Services.AddHttpClient("MyApi", client =>
{<br>    client.BaseAddress = new Uri("https://api.example.com/");<br>    client.DefaultRequestHeaders.Accept.Add(<br>        new MediaTypeWithQualityHeaderValue("application/json"));<br>});

在组件中通过
[Inject]
获取：

@inject IHttpClientFactory HttpClientFactory<br><br>@code {<br>    private HttpClient _httpClient;<br>    protected override void OnInitialized()<br>    {<br>        _httpClient = HttpClientFactory.CreateClient("MyApi");<br>    }<br>}

更推荐直接注入

IHttpClientFactory

而非

HttpClient

实例，避免 DNS 变更或连接泄漏问题。

发送 GET 请求并解析 JSON

调用 REST API 获取数据时，通常用

GetFromJsonAsync<t>()</t>

方法，它自动反序列化响应体。

定义对应的数据模型（如
WeatherForecast.cs
） 在组件中发起请求：

private List<WeatherForecast> forecasts = new();<br>private bool isLoading = true;<br><br>protected override async Task OnInitializedAsync()<br>{<br>    try<br>    {<br>        forecasts = await _httpClient.GetFromJsonAsync<List<WeatherForecast>>("weatherforecast");<br>    }<br>    catch (HttpRequestException ex)<br>    {<br>        // 处理 4xx/5xx 响应<br>        Console.WriteLine($"请求失败：{ex.Message}");<br>    }<br>    finally<br>    {<br>        isLoading = false;<br>    }<br>}

注意：确保 API 返回的 JSON 结构与 C# 类型完全匹配（字段名大小写、嵌套结构等），否则反序列化会静默失败或为 null。

处理 POST 请求与表单提交

向 API 提交数据常用

PostAsJsonAsync()

，它自动设置

Content-Type: application/json

并序列化对象。

构造请求数据对象（如
NewTodo
） 调用方法并检查响应状态码：

var newTodo = new NewTodo { Title = "买牛奶", IsCompleted = false };<br>var response = await _httpClient.PostAsJsonAsync("todos", newTodo);<br><br>if (response.IsSuccessStatusCode)<br>{<br>    var createdTodo = await response.Content.ReadFromJsonAsync<Todo>();<br>    todos.Add(createdTodo);<br>}<br>else<br>{<br>    var error = await response.Content.ReadAsStringAsync();<br>    Console.WriteLine($"创建失败：{error}");<br>}

若需上传文件或混合表单数据，改用

MultipartFormDataContent

手动构建请求体。

跨域（CORS）与本地开发注意事项

Blazor WebAssembly 运行在浏览器沙箱中，受同源策略限制。调用非同源 API 必须由后端启用 CORS。

.NET Web API 示例（
Program.cs
）：

builder.Services.AddCors(options =><br>{<br>    options.AddPolicy("AllowBlazorApp", policy =><br>    {<br>        policy.WithOrigins("https://localhost:5001") // Blazor WASM 默认地址<br>            .AllowAnyMethod()<br>            .AllowAnyHeader();<br>    });<br});<br>// ...<br>app.UseCors("AllowBlazorApp");

开发阶段也可用代理（如
dev-server proxy
或
ASP.NET Core 代理中间件
）绕过浏览器 CORS 检查 Blazor Server 不受浏览器 CORS 限制（请求由服务器发出），但仍需注意后端网络可达性

基本上就这些 —— 配置好客户端、选对方法、处理好异常和跨域，调用 Web API 就很稳了。