如何启动包含C#控制器的React应用并确保API加载？

问题根源 #

单独用npm start启动的只是React开发服务器，它无法处理.NET控制器的请求，必须同时启动.NET后端项目，还要配置好前端请求路径与后端的路由、代理规则。

1. 修正控制器位置 #

.NET的控制器不能放在ClientApp目录下，ClientApp是React前端的专属目录，后端控制器应移到项目根目录的Controllers文件夹（比如YourProjectName/Controllers/UserController.cs），否则.NET框架无法扫描识别到该位置的控制器。

2. 同时启动前后端的两种方式 #

方法一：通过.NET CLI一键启动（推荐） #

在项目根目录（非ClientApp目录）执行命令：

dotnet run

这个命令会同时启动.NET Web API后端，并且自动触发React开发服务器启动，前端的API请求会自动代理到后端，无需额外配置。

方法二：手动分别启动 #

• 先启动后端：在项目根目录执行dotnet run，后端默认运行在https://localhost:5001或http://localhost:5000。
• 再启动前端：进入ClientApp目录执行npm start，此时需要配置前端代理转发请求到后端。

3. 配置前端请求与代理规则 #

调整API请求路径 #

如果用dotnet run一键启动，直接使用带api前缀的相对路径即可（对应后端控制器的路由前缀）：

const getUserDetails = (userId) => { return data_post('/api/user/GetUser/' + userId, {}) }

如果手动分别启动，需在ClientApp目录创建setupProxy.js文件（Create React App模板适用），配置代理：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://localhost:5001', // 替换为你的后端服务器地址
      changeOrigin: true,
    })
  );
};

之后前端请求路径同样使用/api/user/GetUser/${userId}格式，请求会被转发到后端。

4. 确认控制器路由配置 #

检查C#控制器的路由注解是否正确，示例：

[Route("api/[controller]")]
[ApiController]
public class UserController : ControllerBase
{
    [HttpGet("GetUser/{userId}")]
    public IActionResult GetUser(int userId)
    {
        // 返回用户数据逻辑
        return Ok(new { Id = userId, Name = "示例用户" });
    }
}

确保前端请求路径与控制器路由完全匹配。

5. 验证API可用性 #

启动后端后，直接在浏览器访问https://localhost:5001/api/user/GetUser/1，如果能返回正常的JSON数据，说明控制器已成功加载。

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