React调用ASP.NET API报SyntaxError: Unexpected end of input求助

问题根源 #

核心问题出在客户端请求配置里的mode: "no-cors"。当使用该模式时，浏览器会强制限制跨域请求的响应访问权限——即使网络面板显示请求成功并返回了JSON数据，fetch API也无法读取到响应内容，调用request.json()时就会因无有效解析内容抛出SyntaxError: Unexpected end of input。

解决方案 #

1. 移除客户端的no-cors配置 #

修改React请求配置，删除mode: "no-cors"，让浏览器使用默认的cors模式：

export const USER_GET = () => {
    return {
        url: 'https://localhost:7282/api/Person',
        options: {
          method: 'GET',
          // 移除mode: "no-cors"配置
          headers: {
            'Content-Type': 'application/json',
          },
        },
      };
}

2. 在ASP.NET API中配置CORS支持 #

由于React客户端与API运行在不同端口（跨域场景），需要在服务端启用CORS：

步骤1：安装CORS依赖

若未安装，通过NuGet包管理器安装Microsoft.AspNetCore.Cors，或执行以下命令：

Install-Package Microsoft.AspNetCore.Cors

步骤2：在Program.cs中配置CORS策略

添加CORS服务并启用中间件：

var builder = WebApplication.CreateBuilder(args);

// 配置CORS策略，允许React客户端跨域访问
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactClient",
        policy =>
        {
            // 替换为你的React客户端实际地址（如http://localhost:3000）
            policy.WithOrigins("http://localhost:3000")
                  .AllowAnyHeader()
                  .AllowAnyMethod();
        });
});

builder.Services.AddControllers();

var app = builder.Build();

// 在路由和授权中间件之间启用CORS
app.UseCors("AllowReactClient");

app.UseAuthorization();

app.MapControllers();

app.Run();

3. 验证修改 #

重启API和React客户端，再次调用接口即可正常获取并解析JSON数据，控制台报错将消失。

补充说明 #

• no-cors模式仅适用于无需读取响应内容的场景（如加载静态资源），完全不适合API数据请求场景。
• 生产环境中，建议将WithOrigins设置为实际客户端域名，避免使用通配符，保障安全性。

内容的提问来源于stack exchange，提问作者Rafael Jordão