ASP.NET Core 6 Angular配置API路由前缀请求404如何解决

官方模板默认的SpaProxy配置没有适配自定义的/api路由前缀，两类配置缺失会直接导致404：

1. 开发环境下，SpaProxy默认仅放行模板自带的/weatherforecast接口，其余所有请求都会被转发到Angular开发服务，Angular没有匹配/api前缀的前端路由，直接返回404
2. 后端中间件顺序错误时，/api开头的请求会被前端路由兜底规则拦截，根本不会进入MVC控制器路由管道

• 1. 配置Angular侧代理规则
     找到Angular项目根目录（和package.json同层级）下的proxy.conf.js，在代理上下文列表中加入/api前缀，同时确认target地址和后端启动的HTTPS端口一致（端口值可以从后端项目Properties/launchSettings.json的sslPort字段获取）：

  const PROXY_CONFIG = [
    {
      context: [
        "/weatherforecast",
        "/api" // 新增自定义API前缀
      ],
      target: "https://localhost:7213", // 替换为你后端实际的HTTPS地址+端口
      secure: false
    }
  ]
  module.exports = PROXY_CONFIG;
  

• 2. 调整后端中间件过滤规则
     修改后端项目Program.cs，将/api前缀的请求排除在Spa前端兜底路由之外，避免接口请求被转发到前端，核心配置如下（注意中间件顺序不能乱）：

  var builder = WebApplication.CreateBuilder(args);
  // 其他服务注册：AddControllers、AddSpaStaticFiles等保持默认
  builder.Services.AddControllersWithViews();
  var app = builder.Build();
  
  // 先配置异常处理、HSTS等默认中间件
  if (!app.Environment.IsDevelopment())
  {
      app.UseHsts();
  }
  app.UseHttpsRedirection();
  app.UseStaticFiles();
  app.UseSpaStaticFiles();
  app.UseRouting();
  // 鉴权授权中间件保持原有位置
  app.MapControllerRoute(
      name: "default",
      pattern: "{controller}/{action=Index}/{id?}");
  app.MapControllers();
  
  // 关键配置：/api开头的请求不走Spa兜底路由
  app.MapWhen(ctx => !ctx.Request.Path.StartsWithSegments("/api"), spaApp =>
  {
      spaApp.UseSpa(spa =>
      {
          spa.Options.SourcePath = "ClientApp";
          if (app.Environment.IsDevelopment())
          {
              spa.UseAngularCliServer(npmScript: "start");
          }
      });
  });
  
  app.Run();
  

• 3. 校验控制器路由写法
     不要重复叠加路由前缀，控制器层统一配置[Route("api/[controller]")]即可，接口Action上不需要重复写api前缀，避免最终路由变成/api/api/xxx导致404，正确示例：

  [ApiController]
  [Route("api/[controller]")]
  public class DemoController : ControllerBase
  {
      [HttpGet("items")]
      // 最终路由为 /api/demo/items，不要在HttpGet特性里重复加api前缀
      public IActionResult GetItems()
      {
          return Ok(new [] { "item1", "item2" });
      }
  }
  

• 4. 重启开发服务生效
     先完全终止后端运行进程，再终止Angular的ng serve运行进程，重新启动项目即可，代理配置和后端路由规则修改后不会自动热更新，必须重启进程才会生效。

补充说明：生产环境部署时不需要额外配置SpaProxy，只要保持上述中间件顺序，/api前缀的请求会正常进入控制器管道，不会被前端静态资源路由拦截。

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