.NET MVC路由异常：C#后端与React前端数据获取失败排查

先看最直观的问题：你的React组件里没有触发getData函数的逻辑，所以请求根本没发出去，控制台自然没输出。除此之外还有几个潜在问题，我帮你一步步梳理：

1. 触发数据获取逻辑 #

你需要添加触发getData的方式，比如页面加载时自动调用，或者加一个按钮手动触发：

方式一：页面加载时自动获取数据 #

在组件的componentDidMount生命周期钩子中调用getData：

componentDidMount() {
  // 因为页面加载时不需要阻止默认行为，直接调用即可
  this.getData();
}

// 修改getData，去掉不需要的e参数
getData() {
  fetch("api/tubeapi/gettubestatus")
    .then(res => {
      if (!res.ok) throw new Error('请求失败');
      return res.json(); // API返回JSON，这里用json()解析而不是text()
    })
    .then(data => {
      console.log(data);
      // 更新state展示数据
      this.setState({ lineId: data.lineId });
    })
    .catch(err => console.error('获取数据失败:', err)); // 添加错误捕获，避免静默失败
}

方式二：添加按钮手动触发 #

在render里加一个触发按钮：

render() {
  return (
    <div>
      <center>
        <h1>Tube</h1>
        <button onClick={(e) => this.getData(e)}>获取地铁状态</button>
        <h4>Name</h4>
        <p>{this.state.lineId}</p>
        <h4>Status</h4>
        <p>{this.state.status}</p>
      </center>
    </div>
  );
}

2. 修正Fetch的响应处理 #

你的API返回的是JSON格式，但你用了res.text()，这会把JSON当成纯字符串处理，后续解析数据会很麻烦。同时要添加错误处理，避免请求失败时控制台毫无反馈：

修改后的getData示例：

getData(e) {
  e?.preventDefault(); // 仅在处理表单提交时需要，可选保留
  fetch("api/tubeapi/gettubestatus")
    .then(res => {
      // 检查响应状态码是否正常
      if (!res.ok) {
        throw new Error(`HTTP错误状态码: ${res.status}`);
      }
      return res.json(); // 解析JSON响应
    })
    .then(data => {
      console.log(data);
      this.setState({ lineId: data.lineId });
    })
    .catch(err => {
      console.error('获取数据出错:', err);
      // 这里可以给用户展示错误提示，比如弹窗或页面文字
    });
}

3. 跨域问题（CORS）排查 #

如果你的React应用运行在localhost:3000（React默认启动端口），而.NET API在localhost:5000，浏览器会因为跨域安全策略阻止请求。需要在.NET项目中配置CORS：

在.NET MVC中启用CORS #

1. 在Startup.cs的ConfigureServices方法中添加CORS服务：

public void ConfigureServices(IServiceCollection services)
{
    // 其他服务配置...
    services.AddCors(options =>
    {
        options.AddPolicy("AllowReactApp",
            builder => builder.WithOrigins("http://localhost:3000") // React应用的地址
                              .AllowAnyHeader()
                              .AllowAnyMethod());
    });
}

2. 在Configure方法中启用CORS中间件（注意要放在路由相关中间件之前）：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 其他中间件配置...
    app.UseCors("AllowReactApp");
    // 其他中间件（如UseRouting、UseEndpoints）...
}

4. 补充API返回的状态数据 #

你的当前API只返回了lineId，但React组件还展示了status字段，需要修改.NET控制器，把线路状态也返回：

修改控制器的返回逻辑：

return Ok(new { 
    LineId = rawData[0].name, 
    Status = rawData[0].lineStatuses?.FirstOrDefault()?.statusSeverityDescription ?? "未知状态" 
});

然后在React中更新state：

.then(data => {
  console.log(data);
  this.setState({ lineId: data.LineId, status: data.Status });
})

按照上面的步骤修改后，你的React应用应该就能正常获取并展示数据了。

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