React通过Fetch调用ASP.NET控制器失败，遇路由与证书问题

一、路由问题修复 #

1. 修正API请求路径 #

ASP.NET的路由规则是自动去掉控制器名称的Controller后缀：

• 控制器上的[Route("[controller]")]会生成前缀/Data，而非/DataController
• 方法上的[Route("alldata")]拼接后，完整接口地址应为https://localhost:port/Data/alldata

修改React Fetch代码：

export const GetDataset = function () {
  const fetchData = async() => {
    try {
      // 修正路径：移除Controller后缀
      const result = await fetch('https://localhost:port/Data/alldata')
      // 先校验响应状态，避免解析失败
      if (!result.ok) throw new Error(`请求失败：${result.status}`)
      const jTest = await result.json();
      console.log('获取数据：', jTest)
    } catch(error){
      console.error('请求出错：', error)
    }
  }
  fetchData()
}

2. 配置跨域（CORS） #

如果React和ASP.NET运行端口不同，必须开启跨域支持：

• 先安装NuGet包：Microsoft.AspNetCore.Cors
• 在Program.cs中添加CORS配置：

var builder = WebApplication.CreateBuilder(args);

// 添加CORS策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReact", policy =>
    {
        // 替换为你的React项目地址，比如http://localhost:3000
        policy.WithOrigins("http://localhost:3000")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

builder.Services.AddControllers();

var app = builder.Build();

// 启用CORS（要放在路由配置之前）
app.UseCors("AllowReact");

app.UseAuthorization();

app.MapControllers();

app.Run();

3. 临时关闭认证测试 #

控制器上的[Authorize]会拦截未授权请求，开发阶段可以先注释掉这个属性，确认路由能正常访问后再配置认证逻辑。

二、Postman证书验证问题修复 #

提示"Unable to verify the first certificate"是因为本地HTTPS证书不被信任，直接关闭Postman的SSL验证即可：

• 点击Postman右上角齿轮图标，进入Settings
• 切换到General选项卡
• 找到SSL certificate verification，关闭开关
• 重启Postman后重新发起请求

三、验证流程 #

1. 启动ASP.NET项目，在浏览器直接访问https://localhost:port/Data/alldata，确认能返回JSON数据
2. 启动React项目，查看浏览器控制台，确认接口请求成功

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