ASP.NET Core与React前后端分离请求接口JSON解析报错如何解决

问题核心原因 #

你遇到的Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0报错，本质是前端请求拿到的返回值不是预期的JSON格式，而是HTML内容（通常是404/重定向页面，开头为<字符，解析JSON时触发异常），对应你的场景有以下几个明确的修复点：

修复步骤 #

1. 删除fetch请求的mode: 'no-cors'配置
   该配置会让请求返回不透明的opaque类型响应，你无法读取到后端返回的真实数据，且你已经配置了后端CORS规则，完全不需要加这个参数。修改后的请求代码为：

const response = await fetch(`${process.env.REACT_APP_API_URL}/Accounts`);

2. 修正后端CORS配置顺序与规则
   ASP.NET Core 3.1 中CORS中间件的放置顺序要求非常严格，必须放在UseRouting之后、UseAuthorization之前，且直接使用你定义的策略名即可，无需重复定义规则：

• ConfigureServices中的配置补充完整规则：

  services.AddCors(allowsites => {
      allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
  });
  

  注：补充AllowAnyMethod和AllowAnyHeader避免跨域请求的方法、请求头被拦截
• Configure方法中调整CORS中间件位置：

  app.UseRouting();
  // 放在UseRouting之后、UseAuthorization之前
  app.UseCors("AllowOrigin");
  app.UseAuthorization();
  app.UseEndpoints(endpoints => { ... });
  

3. 给API Controller补充必要的特性
   你的AccountsController是API接口，需要补充[ApiController]、路由特性、请求方法特性，避免路由不匹配返回404页面：

[EnableCors("AllowOrigin")]
[ApiController] // 新增API控制器特性
[Route("[controller]")] // 新增路由规则，匹配/Accounts路径
public class AccountsController : ControllerBase // 建议纯API用ControllerBase替代Controller
{
    private readonly DEMOWTSSPortalContext _context;

    public AccountsController(DEMOWTSSPortalContext context)
    {
        _context = context;
    }

    // GET: Accounts
    [HttpGet] // 明确标记为GET请求
    public IEnumerable<Accounts> Index()
    {
        return _context.Accounts.ToList();
    }
}

4. 验证后端接口与前端环境变量
   先直接在浏览器地址栏输入{后端启动的完整地址，比如https://localhost:5001}/Accounts，确认可以正常返回JSON数组。如果正常返回，再检查前端的process.env.REACT_APP_API_URL值是否和后端地址完全一致，不要遗漏协议头（http/https）、端口号。

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