无法访问.NET API：SPA代理拦截请求，外部前端调用后端失败

核心问题原因 #

你的请求被前端路由拦截，本质是中间件顺序错误——静态文件/SPA fallback逻辑先于API端点路由执行，导致/api开头的请求也被前端接管处理。另外，仅配置全局路由模板但未给控制器添加匹配的路由属性，也会导致API无法被正确映射。

解决步骤 #

1. 调整中间件顺序（关键） #

在Program.cs中，必须保证API端点路由逻辑优先于静态文件和SPA fallback，这样/api开头的请求会先被后端处理，不会流入前端路由。示例代码：

var builder = WebApplication.CreateBuilder(args);

// 添加控制器服务
builder.Services.AddControllers();
// 若使用CreateReactApp，添加SPA静态文件服务
builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/build"; // React构建后的静态文件目录
});

var app = builder.Build();

// 中间件顺序严格遵循：路由 -> 授权 -> API端点 -> 静态文件 -> SPA fallback
app.UseRouting();

app.UseAuthorization();

// 配置API端点
app.UseEndpoints(endpoints =>
{
    // 方式1：配合控制器上的[Route]属性使用（推荐）
    endpoints.MapControllers();
    // 方式2：使用全局路由模板（需确保控制器路由匹配）
    // endpoints.MapControllerRoute(
    //     name: "default",
    //     pattern: "api/{controller}/{action=Index}/{id?}"
    // );
});

// 托管React静态文件
app.UseStaticFiles();
app.UseSpaStaticFiles();

// SPA fallback配置：仅非API请求会进入前端路由
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (app.Environment.IsDevelopment())
    {
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
});

2. 给控制器添加路由属性 #

确保你的API控制器上添加了匹配/api前缀的路由属性，这样才能和全局路由规则或MapControllers配合生效。示例：

[Route("api/[controller]")]
[ApiController]
public class UsersController : ControllerBase
{
    // 对应请求路径：GET /api/users
    [HttpGet]
    public IActionResult GetAllUsers()
    {
        return Ok(new { data = new List<string> { "Alice", "Bob" } });
    }

    // 对应请求路径：GET /api/users/1
    [HttpGet("{id}")]
    public IActionResult GetUser(int id)
    {
        return Ok(new { id = id, name = "Alice" });
    }
}

3. 验证前端路由行为 #

如果前端使用BrowserRouter，无需额外修改——因为后端已经优先处理了/api开头的请求，只有非/api的请求才会进入前端路由的fallback逻辑，不会出现前端拦截API请求的情况。

测试验证 #

启动项目后，直接访问http://localhost:<端口>/api/users，应该能正常返回API数据，而不会进入前端的404页面。

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