React使用Fetch API调用ASP.NET Core Web API自定义控制器无法命中如何解决

你遇到的问题由两个常见配置错误共同导致：

1. 前端代理配置未包含自定义控制器的路由，请求没有被转发到ASP.NET Core后端服务
2. 后端中间件顺序配置错误，会导致路由匹配逻辑失效

1. 修正前端代理配置 #

打开setupProxy.js文件，context数组定义了所有需要转发到后端的路由前缀，默认只有weatherforecast等预置路由，你新增的Hello控制器路由不在列表中，所以请求被React开发服务器直接拦截返回404，不会进入后端。
你需要将自定义控制器的路由前缀加入数组：

const context = [
    '/weatherforecast',
    '/controllerName1',
    '/controllerName2',
    '/Hello' // 新增Hello控制器的路由前缀
];

修改后重启前端开发服务生效。

2. 修正后端中间件顺序 #

你当前的Program.cs中中间件顺序不符合ASP.NET Core的规范：UseAuthorization必须放在UseRouting之后，否则路由匹配逻辑会提前被鉴权中间件拦截，导致合法的路由无法命中。
调整后的中间件顺序如下：

app.UseHttpsRedirection();
// 先执行路由匹配
app.UseRouting();
// 匹配到路由后再执行鉴权逻辑
app.UseAuthorization();
app.MapControllers();

修改后重启后端服务生效。

如果后续会新增大量自定义控制器，一个个往代理列表加效率很低，建议给所有后端控制器加统一的路由前缀：

1. 调整控制器路由特性，统一加api前缀：

[ApiController]
[Route("api/[controller]")] // 新增api前缀
public class HelloController : ControllerBase
{
    [HttpGet]
    public IEnumerable<T> Get()
    {
        //do something
    }
}

2. 修改setupProxy.js的context配置，匹配所有带api前缀的请求：

const context = [
    '/api' // 匹配所有api前缀的请求，不需要逐个添加控制器
];

3. 前端fetch请求路径对应调整为：

const response = await fetch('/api/hello');

如果修改后仍有问题，可按以下步骤快速定位：

• 直接在浏览器访问后端接口地址，比如https://localhost:5001/Hello，如果能正常返回数据，说明后端配置正常，问题出在前端代理
• 打开浏览器开发者工具的网络面板，查看fetch请求的实际请求地址，如果请求地址是React开发服务器的地址（通常是https://localhost:3000/Hello）且返回404，说明代理配置未生效

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