ASP.NET Core实现API与Angular SPA同端口部署方案问询

AI 小北

2026-8-21

解决ASP.NET Core与Angular同端口服务问题

要实现/api开头的请求由ASP.NET控制器处理，其余请求返回Angular页面，核心是调整HTTP请求管道的中间件顺序，确保API路由优先匹配，再fallback到SPA。你的代码主要问题是中间件顺序错误，以下是修正方案：

修正后的完整代码

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.SpaServices.AngularCli;

var builder = WebApplication.CreateBuilder(args);

// 注册服务
builder.Services.AddControllers();

builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/dist";
});

var app = builder.Build();

// 配置请求管道
app.UseHttpsRedirection();

// 启用路由（必须在授权和路由映射之前）
app.UseRouting();

app.UseAuthorization();

// 映射API控制器，优先匹配/api开头的请求
app.MapControllers();

// 提供Angular编译后的静态资源
app.UseSpaStaticFiles();

// 配置SPA，所有非API请求fallback到Angular页面
app.UseSpa(spa =>
{
    spa.Options.SourcePath = System.IO.Path.Combine(builder.Environment.ContentRootPath, "ClientApp");

    if (builder.Environment.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

app.Run();

关键调整说明

中间件顺序：UseRouting必须放在UseAuthorization和MapControllers之前，ASP.NET Core的中间件按顺序执行，路由系统需要先启动才能匹配API路径。
API路由优先：MapControllers要在UseSpa之前，这样所有以/api开头的请求会先被控制器捕获处理，不会进入SPA的fallback逻辑。
静态资源服务：UseSpaStaticFiles负责提供Angular编译后的js、css等静态文件，必须在UseSpa之前调用。