从ASP.NET Core MVC接口获取数据时返回HTML而非JSON的原因排查

我正在开发一个前端基于React.js、后端采用ASP.NET Core MVC的应用，尝试调用API获取数据用于页面渲染，但接口未返回预期的JSON数据，而是返回了HTML文件。

前端React代码 #

import React, { useState, useEffect } from 'react';
import { AllBlogCard } from '../components/AllBlogCard.jsx';
import axios from 'axios';

const PostsPage = () => {
  const [blogPosts, setBlogPosts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/BlogApi/List');
        if (response.ok) {
          const data = await response.json();
          console.log('blog data:', data);
          setBlogPosts(data);
        } else {
          console.error('Failed to fetch blog posts');
        }
      } catch (error) {
        console.error(error);
      }
    };
  
    fetchData();
  }, []);

  return (
    <div className="container mt-5">
      <div className="row">
        <div className="col-lg-8 mx-auto">
          <h2 className="section-heading text-center mb-4">All Blog Posts</h2>

          {blogPosts.map((post, index) => (
            <AllBlogCard key={index} {...post} />
          ))}

          <div className="text-center mt-4">
            <button className="btn customBtn my-5">View More Posts<i className="bi bi-arrow-down m-1"></i></button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PostsPage;

后端ASP.NET Core API代码 #

[Route("api/[controller]")]
[ApiController]
public class BlogApiController : ControllerBase
{
     private readonly BloggieDbContext _context;
     private readonly IBlogPostRepo blogPostRepo;

     public BlogApiController(IBlogPostRepo blogPostRepo, BloggieDbContext context)
     {
         _context = context;
         this.blogPostRepo = blogPostRepo;
     }

     [HttpGet("List")]
     [Produces("application/json")]
     public async Task<IActionResult> ListApi()
     {
         var blogPosts = await blogPostRepo.GetAllAsync();
         return Ok(blogPosts);
     }
}

补充说明：BlogPost仓储来自仓储模式文件夹，包含DbContext及所有渲染数据所需的必要组件。

可能的原因及解决方案 #

1. 路由匹配优先级问题 #

ASP.NET Core中，如果MVC页面路由先于API路由匹配，会返回HTML页面而非API响应：

• 检查Program.cs中的路由注册顺序，确保app.MapControllers()在app.MapRazorPages()或app.MapControllerRoute()之前，让API路由优先匹配请求。
• 直接在浏览器地址栏访问http://localhost:xxxx/api/BlogApi/List（替换为你的后端端口），确认是否返回JSON。如果返回HTML，说明后端路由配置存在问题。

2. 中间件顺序错误 #

中间件执行顺序会影响请求处理逻辑：

• 确保app.UseStaticFiles()、app.UseRouting()、app.UseCors()（若配置跨域）、app.MapControllers()的顺序正确，避免静态文件中间件误将API请求识别为静态资源返回HTML。

3. 错误处理返回HTML #

如果API内部抛出异常，默认错误处理中间件可能返回HTML错误页：

• 配置API专属的全局异常处理，确保返回JSON格式错误：

  // 在Program.cs中添加
  app.UseExceptionHandler(errorApp =>
  {
      errorApp.Run(async context =>
      {
          context.Response.ContentType = "application/json";
          await context.Response.WriteAsJsonAsync(new 
          { 
              statusCode = context.Response.StatusCode,
              message = "An error occurred while processing your request" 
          });
      });
  });
  

4. 跨域配置缺失（前后端端口不同时） #

若前端和后端运行在不同端口，跨域限制可能导致请求异常：

• 在Program.cs中添加跨域配置：

  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowReactOrigin",
          policy => policy.WithOrigins("http://localhost:3000") // 替换为你的前端地址
                          .AllowAnyHeader()
                          .AllowAnyMethod());
  });
  
  app.UseCors("AllowReactOrigin");
  

5. 前端请求路径错误 #

• 打开浏览器开发者工具的Network标签，查看请求的实际URL、状态码和响应内容，确认请求路径是否与API路由完全一致。

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