.NET 8独立Blazor WebAssembly调用API报TypeError: Failed to Fetch

排查步骤与解决方案 #

1. 检查API响应的内容类型与编码 #

虽然网络面板显示200状态码，但如果API返回的Content-Type不符合标准（比如拼写错误、缺少字符集声明），Blazor WASM的HttpClient可能无法正确解析响应：

• 用Edge开发者工具的响应标签查看实际返回内容，确认Content-Type头为application/json; charset=utf-8这类标准格式。
• 若API返回纯文本格式的JSON，尝试用HttpResponseMessage.Content.ReadAsStringAsync()手动读取内容，再自行反序列化，而非直接调用GetFromJsonAsync。

2. 验证CORS配置的有效性 #

即使API配置了CORS，仍可能存在疏漏：

• 针对本地ASP.NET Core API，确保CORS策略允许https://localhost:7113（Blazor WASM默认使用HTTPS）作为来源，同时允许GET等所需HTTP方法及必要响应头。示例配置：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowBlazorWasm", policy =>
    {
        policy.WithOrigins("https://localhost:7113")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

app.UseCors("AllowBlazorWasm");

• 查看Edge开发者工具的控制台标签，是否存在隐藏的CORS拦截提示（部分场景下网络面板显示200，但浏览器实际因CORS规则拦截了响应）。

3. 简化HttpClient调用逻辑 #

排除HttpClient配置或序列化逻辑的问题：

• 确保注入的是框架默认的HttpClient，而非自定义HttpClientHandler（WASM环境中部分Handler配置不生效）。
• 使用最简代码测试调用，先确认能读取到原始响应内容：

private readonly HttpClient _http;

public YourComponent(HttpClient http)
{
    _http = http;
}

public async Task TestApiCall()
{
    try
    {
        var response = await _http.GetAsync("目标API地址");
        response.EnsureSuccessStatusCode();
        var rawContent = await response.Content.ReadAsStringAsync();
        Console.WriteLine(rawContent);
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.ToString());
    }
}

4. 排查浏览器环境干扰 #

• 禁用Edge的所有扩展（如广告拦截器、隐私插件），部分扩展会拦截API请求。
• 切换到隐私模式（InPrivate）测试，排除浏览器缓存或本地配置的影响。

5. 检查API的HTTPS证书有效性 #

若目标API使用HTTPS：

• 对于本地自签名证书，先在Edge中直接访问API地址，手动添加证书信任例外，再测试Blazor应用的调用。

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