Blazor WebAssembly接口返回text/html而非JSON求助

看起来你遇到的是Blazor WASM项目里很典型的路由或响应配置问题——状态码200但Content-Type不对，浏览器直接访问接口弹异常，说明你的API请求并没有正确返回JSON，反而返回了HTML内容（大概率是错误页或者Blazor的默认页面）。下面我一步步帮你排查和解决：

1. 先检查API控制器的基础配置 #

确保你的控制器和Action标注了正确的属性，这是API能正常返回JSON的核心前提：

// 必须添加[ApiController]，它会自动处理JSON格式化、路由验证等逻辑
[ApiController]
// 用清晰的路由前缀，避免和Blazor页面路由冲突
[Route("api/[controller]")]
public class DataController : ControllerBase
{
    // 明确标注HttpGet和路由片段，让请求能精准匹配到这个Action
    [HttpGet("encrypted-data")]
    public async Task<IActionResult> GetEncryptedDataAsync()
    {
        try
        {
            // 先替换成简单测试数据，排除业务逻辑（比如加密）异常的干扰
            var testData = new { EncryptedValue = "test-encrypted-string" };
            return Json(testData);
        }
        catch (Exception ex)
        {
            // 捕获异常后返回JSON格式错误，而非默认的HTML错误页
            return StatusCode(StatusCodes.Status500InternalServerError, 
                new { ErrorMessage = ex.Message });
        }
    }
}

2. 核对中间件顺序（最容易踩坑的点！） #

Blazor WASM项目的中间件顺序直接决定请求的路由走向，如果MapControllers()放在了MapFallbackToPage()之后，API请求会被优先路由到Blazor的_Host页面，返回HTML内容。打开Program.cs确认顺序：

var app = builder.Build();

// ...其他配置（HSTS、静态文件、调试工具等）...

app.UseRouting();
app.UseAuthorization();

// 这个必须放在MapBlazorHub和MapFallbackToPage之前！
app.MapControllers();

app.MapBlazorHub();
// 这个中间件会捕获所有未匹配的请求，返回Blazor页面
app.MapFallbackToPage("/_Host");

app.Run();

如果顺序反了，把MapControllers()移到MapFallbackToPage()前面即可。

3. 验证客户端请求的URL是否正确 #

确保Index.razor里的请求路径和API路由完全匹配：

@inject HttpClient Http

<p>加密数据：@encryptedData</p>

@code {
    private string encryptedData;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            // 路径要严格对应控制器路由：api/[控制器名]/[Action路由片段]
            // 比如控制器是DataController，Action路由是encrypted-data，所以路径是/api/data/encrypted-data
            var result = await Http.GetFromJsonAsync<EncryptedDataModel>("/api/data/encrypted-data");
            encryptedData = result?.EncryptedValue;
        }
        catch (Exception ex)
        {
            Console.WriteLine($"请求失败：{ex.Message}");
        }
    }

    // 定义和API返回结构匹配的模型类
    public class EncryptedDataModel
    {
        public string EncryptedValue { get; set; }
    }
}

注意：Blazor WASM的HttpClient默认基地址是项目根目录，不要漏了/api前缀。

4. 用浏览器开发者工具排查细节 #

打开浏览器的「开发者工具」→「Network」标签，重新触发请求：

• 查看Response内容：如果是HTML（比如Blazor页面或错误页），说明请求没匹配到API控制器；如果是JSON，问题可能出在客户端的模型绑定或序列化上。
• 检查Response Headers里的Content-Type：如果是text/html，那肯定是返回了HTML内容，回到前面的步骤排查路由和中间件。

5. 检查全局异常处理是否返回HTML #

如果你的项目配置了全局异常过滤器或中间件，确保它针对API请求返回JSON而非HTML。可以添加一个专门处理API异常的中间件：

// 放在UseRouting之后，MapControllers之前
app.Use(async (context, next) =>
{
    try
    {
        await next();
    }
    catch (Exception ex)
    {
        // 只处理/api开头的请求
        if (context.Request.Path.StartsWithSegments("/api"))
        {
            context.Response.ContentType = "application/json";
            context.Response.StatusCode = StatusCodes.Status500InternalServerError;
            await context.Response.WriteAsJsonAsync(new 
            { 
                Error = "服务器内部错误", 
                Details = ex.Message 
            });
        }
        else
        {
            // 非API请求走默认异常处理逻辑
            throw;
        }
    }
});

按照这些步骤排查，应该能快速定位到问题所在。如果还是有疑问，可以把浏览器Network里的请求详情贴出来，能更精准地帮你分析。

内容的提问来源于stack exchange，提问作者Krishna.N