ASP.NET Core 6搭配Angular13时自定义Web API始终返回404错误

最高概率原因 #

默认Angular模板开发代理未添加新接口路由规则。模板生成的proxy.conf.js仅默认配置了/weatherforecast路径的转发，新增的API路径没有加入转发规则时，请求会发到Angular前端开发服务器而非后端，直接返回404，后端断点自然无法命中。

逐步排查解决步骤 #

• 先修正后端代码语法错误：你贴出的GetOptionsController末尾多了1个多余的右大括号}，先删除冗余符号，确认项目无编译错误。
• 绕过前端直接验证后端接口可用性：运行项目后，直接在浏览器访问后端地址（比如https://localhost:xxxx/getoptions，端口是你后端启动的端口，不是Angular的4200端口）：
  • 如果浏览器能正常返回接口JSON数据，说明后端逻辑完全正常，问题出在Angular侧的请求/代理配置
  • 如果浏览器也返回404，继续排查后端配置
• 修复后端配置问题：
  1. 打开项目根目录的Program.cs，确认存在app.MapControllers();代码（默认模板自带，若被误删需要补回）
  2. 如果你的自定义控制器放在了其他类库、或者非Web项目默认的Controllers文件夹下，补充控制器程序集扫描配置：

  builder.Services.AddControllers()
      .AddApplicationPart(typeof(GetOptionsController).Assembly);
  

  3. 确认依赖服务注册：在Program.cs中补充GetOptionsService的DI注册，避免构造函数注入失败：

  builder.Services.AddScoped<GetOptionsService>();
  

  注：该问题会返回500错误而非404，优先级较低
• 修复Angular侧配置问题：
  1. 打开ClientApp/src/proxy.conf.js，在context数组中加入你新增的API路径，或者直接调整匹配规则覆盖所有API请求，示例：

  const PROXY_CONFIG = [
    {
      context: [
        "/weatherforecast",
        "/getoptions", // 新增自定义API路径
        // 开发环境也可以直接写"/*"匹配所有路径，避免每次加接口都改配置
      ],
      target: "https://localhost:你的后端实际启动端口",
      secure: false
    }
  ]
  module.exports = PROXY_CONFIG;
  

  2. 修正Angular服务中的请求路径：你当前写的"getoptions"是相对路径，会基于当前页面路由拼接，容易出现路径错误，改成带根路径斜杠的写法：

  return this.http.get<IOption[]>("/getoptions", { responseType: 'json' });
  

• 可选规范优化：将GetOptionsController的基类从Controller改为ControllerBase，Controller类是为MVC视图场景设计的，WebAPI场景不需要视图相关功能，不会影响接口可用性但符合框架规范。

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