Blazor WebAssembly中ReadFromJsonAsync报错：'<'是无效值起始

核心原因分析 #

控制台报错'<'是无效值起始，本质是API返回的不是预期的JSON格式，而是以<开头的HTML内容（比如错误页面、MVC视图甚至静态HTML）——哪怕HTTP状态码显示200 OK，实际响应体是HTML而非JSON，导致ReadFromJsonAsync反序列化失败。

具体排查步骤 #

• 检查API路由匹配
  确认GetBlogPostByUrl调用的API端点路由是否正确。比如后端API控制器路由是[Route("api/[controller]")]，但前端请求的是/Blog/GetByUrl/{url}，可能误匹配到MVC默认路由（返回HTML页面）而非API路由。直接在浏览器开发者工具的网络面板查看该请求的响应体，就能判断返回的是HTML还是JSON。
• 验证API返回内容
  在后端GetBlogPostByUrl方法加断点，确认返回的是BlogPost对象而非ViewResult或其他HTML相关结果。比如ASP.NET控制器如果继承了Controller而非ControllerBase，可能错误返回视图HTML；或者方法内的错误处理逻辑返回了HTML页面。
• 确认URL参数传递与编码
  虽然你验证了URL正确，但导航到详情页时，URL参数是否被正确绑定？比如详情页的[Parameter]属性是否正确定义，特殊字符是否做了URL编码/解码处理——如果参数编码错误，API请求的URL和数据库存储的不一致，可能触发后端返回错误HTML。
• 检查请求/响应的Content-Type
  前端调用API时，确认请求的Accept头是application/json；后端返回的Content-Type头是application/json。如果后端返回text/html，哪怕内容是JSON（概率极低），也会导致反序列化失败，更常见的是直接返回HTML。

修复示例 #

后端API控制器修正 #

确保API控制器继承ControllerBase，并正确返回JSON格式结果：

[ApiController]
[Route("api/blog")]
public class BlogController : ControllerBase
{
    private readonly BlogDbContext _context;

    public BlogController(BlogDbContext context)
    {
        _context = context;
    }

    [HttpGet("getbyurl/{url}")]
    public async Task<IActionResult> GetBlogPostByUrl(string url)
    {
        var post = await _context.BlogPosts.FirstOrDefaultAsync(p => p.Url == url);
        if (post == null)
        {
            return NotFound(); // 返回404状态码，而非HTML错误页
        }
        return Ok(post); // 自动序列化为JSON，Content-Type为application/json
    }
}

前端请求逻辑修正 #

在BlogService里添加响应类型校验，提前排查非JSON响应：

public async Task<BlogPost> GetBlogPostByUrl(string url)
{
    var encodedUrl = Uri.EscapeDataString(url);
    var response = await _httpClient.GetAsync($"api/blog/getbyurl/{encodedUrl}");
    
    if (!response.IsSuccessStatusCode)
    {
        throw new HttpRequestException($"请求失败，状态码：{response.StatusCode}");
    }

    // 校验响应内容类型
    var contentType = response.Content.Headers.ContentType?.MediaType;
    if (contentType != "application/json")
    {
        var rawContent = await response.Content.ReadAsStringAsync();
        throw new InvalidOperationException($"预期JSON响应，但收到{contentType}，内容：{rawContent}");
    }

    return await response.Content.ReadFromJsonAsync<BlogPost>();
}

快速验证方法 #

直接在浏览器地址栏输入API请求地址（比如https://你的域名/api/blog/getbyurl/你的文章URL），查看返回的是JSON还是HTML。如果是HTML，说明后端路由或返回结果有问题；如果是JSON，再检查前端模型与JSON结构是否匹配。

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