非MVC架构的ASP.NET Core能否同时托管REST API与React SPA？

当然可以！不用依赖MVC，你完全可以用ASP.NET Core的基础路由和静态文件中间件来同时托管React SPA和你的REST API。你遇到的问题核心是前端路由的回退逻辑没处理，以及中间件顺序不对导致的请求冲突。

问题根源分析 #

你之前的配置里，静态文件中间件先处理请求，然后才是API路由。当启用React Router后，用户直接访问像/dashboard这样的前端路由时，静态文件中间件找不到对应的文件，就会交给API路由，但你的路由里没有匹配规则，所以返回404。而禁用API路由时，静态文件能加载，但API请求又没地方处理——这就是中间件顺序和回退逻辑的问题。

解决方案：调整中间件顺序与添加SPA回退逻辑 #

修改你的Configure方法，按以下顺序排列中间件，确保API请求优先被处理，同时为前端路由添加回退：

public void Configure(IApplicationBuilder app, ILoggerFactory loggerFactory)
{
    // 1. 优先处理API路由：所有/api开头的请求直接进入路由处理
    app.UseRouter(buildRoutes(app));

    // 2. 处理默认文件（比如index.html）
    app.UseDefaultFiles();

    // 3. 配置静态文件服务，支持未知文件类型（适配React打包后的资源）
    app.UseStaticFiles(new StaticFileOptions
    {
        ServeUnknownFileTypes = true
    });

    // 4. SPA回退中间件：非API路径的请求，若静态文件找不到则返回index.html
    app.Use(async (context, next) =>
    {
        // 只处理非API的请求
        if (!context.Request.Path.StartsWithSegments("/api"))
        {
            // 重写路径到入口文件，让React Router接管路由
            context.Request.Path = "/index.html";
            await next();
        }
        else
        {
            await next();
        }
    });
}

为什么这样改？

• API路由优先：把UseRouter放在最前面，确保所有/api开头的请求直接被你的API处理，不会被静态文件中间件拦截。
• 静态文件处理：接着处理静态资源（JS、CSS、图片等），确保SPA的静态资源能正常加载。
• SPA回退：最后这个自定义中间件会捕获所有非API的、且找不到对应静态文件的请求（也就是React Router的前端路由），把请求路径重写为/index.html，这样静态文件中间件就会返回SPA的入口文件，React Router就能正常解析前端路由了。

关于API版本化的实现 #

你提到要添加版本化的API base URL，很简单，修改你的url方法即可：

private IRouter buildRoutes(IApplicationBuilder app)
{
    // 比如添加v1版本前缀
    string url(string path) => $"api/v1/{path}";

    RouteBuilder routeBuilder = new RouteBuilder(app, new RouteHandler(null));

    // 你的API路由定义不变
    routeBuilder.MapGet(url("status"), GetControllerStatus);
    routeBuilder.MapPost(url("heartbeat"), GotHeartbeat);
    routeBuilder.MapGet(url("items/{id}"), httpCtx => {
        string id = httpCtx.GetRouteValue("id").ToString();
        return RetrieveItem(httpCtx, id);
    });

    return routeBuilder.Build();
}

这样所有API都会带上/api/v1的前缀，后续要升级版本时只需要修改这个方法即可。

验证效果 #

配置完成后：

• 访问http://localhost:11111会加载React SPA的入口文件，React Router正常工作；
• 访问http://localhost:11111/api/v1/status会触发你的API处理逻辑；
• 直接访问前端路由（比如http://localhost:11111/dashboard）会返回index.html，React Router会渲染对应的页面；
• SPA里调用API时，直接用相对路径/api/v1/xxx即可，不需要额外代理。

如果你的ASP.NET Core版本是3.0及以上，还可以用更简洁的UseEndpoints来定义API路由（不需要依赖MVC），示例如下：

// ConfigureServices里添加
services.AddRouting();
services.AddLogging();

// Configure里
app.UseRouting();

app.UseEndpoints(endpoints =>
{
    endpoints.MapGet("/api/v1/status", GetControllerStatus);
    endpoints.MapPost("/api/v1/heartbeat", GotHeartbeat);
    endpoints.MapGet("/api/v1/items/{id}", async context =>
    {
        string id = context.GetRouteValue("id").ToString();
        await RetrieveItem(context, id);
    });
});

// 后面跟上静态文件和SPA回退中间件，和之前一样

这样代码更清晰，也是官方推荐的路由方式。

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