使用UseProxyToSpaDevelopmentServer致ASP.NET Core 8 Web API路由被隐藏

问题根源 #

开发环境下，UseProxyToSpaDevelopmentServer会将所有未被前置中间件处理的请求转发到Angular的ng serve服务。如果API路由（如/WeatherForecast）和Swagger路径未被路由中间件优先匹配，就会被Spa中间件拦截，转发到Angular后返回404 HTML（Angular路由无对应路径）。

解决方法 #

方案1：调整ASP.NET中间件顺序，优先处理API请求 #

确保API控制器、Swagger的路由映射逻辑在Spa中间件之前执行，同时配置Spa中间件排除API/Swagger路径：

var builder = WebApplication.CreateBuilder(args);

// 注册服务
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddSpaStaticFiles(config => config.RootPath = "wwwroot");

var app = builder.Build();

// 开发环境配置
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
    // 配置CORS允许Angular跨域请求
    app.UseCors(p => p.WithOrigins("http://localhost:4200")
                      .AllowAnyHeader()
                      .AllowAnyMethod());
}
else
{
    app.UseHsts();
    app.UseSpaStaticFiles();
}

app.UseHttpsRedirection();
app.UseAuthorization();

// 关键：先映射API控制器，确保API请求被优先处理
app.MapControllers();

// 配置Spa代理/静态文件服务
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp"; // 替换为你的Angular项目根路径

    if (app.Environment.IsDevelopment())
    {
        spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
        // 排除API/Swagger路径，避免被代理
        spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
        {
            OnPrepareResponse = ctx =>
            {
                var path = ctx.Context.Request.Path.Value;
                if (path.StartsWith("/api/") || path.StartsWith("/swagger/"))
                {
                    ctx.Context.Response.StatusCode = StatusCodes.Status404NotFound;
                }
            }
        };
    }
});

app.Run();

方案2：让Angular代理API请求（更推荐，无CORS问题） #

通过Angular的代理配置，将API请求转发到ASP.NET服务，开发时直接访问Angular的4200端口即可：

1. 在Angular项目的src目录下创建proxy.conf.json：

{
  "/api/*": {
    "target": "https://localhost:<你的ASP.NET端口号>",
    "secure": false,
    "changeOrigin": true
  },
  "/swagger/*": {
    "target": "https://localhost:<你的ASP.NET端口号>",
    "secure": false,
    "changeOrigin": true
  }
}

2. 修改angular.json中的serve配置，指定代理文件：

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "<你的Angular项目名>:build",
      "proxyConfig": "src/proxy.conf.json"
    }
  }
}

3. 此时ASP.NET的Spa中间件可简化（开发环境无需代理）：

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    // 开发环境不再代理，由Angular转发API请求
});

调试验证 #

开发环境可添加请求日志，确认路由处理流程：

if (app.Environment.IsDevelopment())
{
    app.Use(async (ctx, next) =>
    {
        Console.WriteLine($"Request Path: {ctx.Request.Path}");
        await next();
        Console.WriteLine($"Response Status: {ctx.Response.StatusCode}");
    });
}

总结 #

• 方案1适合需要通过ASP.NET端口同时访问API和SPA的场景，需注意中间件顺序和CORS配置。
• 方案2更简洁，避免跨域问题，开发时直接操作Angular端口即可。

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