Blazor WebAssembly中如何修复‘TypeError: Failed to fetch’错误？

问题场景 #

在Blazor WebAssembly中使用以下代码调用API时，抛出TypeError: Failed to fetch错误：

public async Task<string?> MakeReservation(MakeReservationModel model)
{
    string result = "";
    try
    {
        var _httpClient = new HttpClient();

        var jsonRequest = JsonConvert.SerializeObject(model);
        var jsoncontent = new StringContent(jsonRequest, Encoding.UTF8, "application/json");
        var response = await _httpClient.PostAsync("xyz/api/pianeta/zyx", jsoncontent);

        if (response.StatusCode == HttpStatusCode.OK)
        {
            result = await response.Content.ReadAsStringAsync();
        }

        return result;
    }
    catch (Exception ex)
    {
        throw;
    }
}

错误信息：TypeError: Failed to fetch

修复步骤 #

1. 改用依赖注入的HttpClient #

Blazor WebAssembly中禁止手动实例化HttpClient，必须通过依赖注入获取实例。手动创建的实例不会继承框架的配置（如基地址、CORS设置），这是引发fetch错误的常见原因。

修改后的代码示例：

// 先在组件/服务的构造函数中注入HttpClient
private readonly HttpClient _httpClient;

public YourComponentOrService(HttpClient httpClient)
{
    _httpClient = httpClient;
}

public async Task<string?> MakeReservation(MakeReservationModel model)
{
    try
    {
        var jsonRequest = JsonConvert.SerializeObject(model);
        var jsoncontent = new StringContent(jsonRequest, Encoding.UTF8, "application/json");
        // 如果已配置基地址，只需写API的相对路径
        var response = await _httpClient.PostAsync("api/pianeta/zyx", jsoncontent);

        // 主动校验响应状态，非200状态码直接抛出异常，便于排查
        response.EnsureSuccessStatusCode();
        
        return await response.Content.ReadAsStringAsync();
    }
    catch (Exception ex)
    {
        // 添加日志输出，方便定位具体错误
        Console.WriteLine($"API请求失败：{ex.Message}");
        throw;
    }
}

2. 校验API地址与CORS配置 #

• 确认API地址正确性：Blazor运行在浏览器端，需使用完整的跨域地址（如https://your-api-domain.com/api/pianeta/zyx），或在Program.cs中配置HttpClient基地址后使用相对路径：

  builder.Services.AddScoped(sp => new HttpClient 
  { 
      BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) 
  });
  

• 配置后端CORS：确保API服务器允许Blazor应用的域名跨域访问。以ASP.NET Core为例，在Program.cs中添加：

  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowBlazor",
          policy => policy.WithOrigins("https://localhost:5000") // Blazor应用的访问地址
                          .AllowAnyHeader()
                          .AllowAnyMethod());
  });
  
  app.UseCors("AllowBlazor");
  

3. 确认API服务正常运行 #

直接通过浏览器、Postman等工具调用API地址，验证API是否能正常返回响应，排除API自身的500错误、路由错误等问题。

4. 处理HTTPS混合内容问题 #

如果Blazor应用使用HTTPS协议，API必须同样使用HTTPS。浏览器会阻止从HTTPS页面发起HTTP请求，导致fetch失败。

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