Blazor中调用Web API需正确配置HttpClient服务、处理跨域、管理生命周期及错误；推荐使用命名或类型化客户端，通过IHttpClientFactory注入，结合GetFromJsonAsync/PostAsJsonAsync发送请求，并确保后端启用CORS。
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>() 方法，它自动反序列化响应体。
- 定义对应的数据模型（如
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 就很稳了。
