Angular+ASP.NET Core Web API新增控制器端点遇404问题求助

我按照微软教程创建了包含ASP.NET Core Web API的独立Angular项目，WeatherForecast控制器的断点可以正常命中，但新建Account控制器并添加Login端点后，通过Angular调用始终返回404 NotFound。尝试过调整路由路径为/account或/account/login，也更新了proxy.config.js配置、API路由及Angular请求路径，但问题依旧，新增的GET端点也报404，请求帮忙排查。

相关代码片段 #

初始API代码 #

[ApiController]
[Route("[controller]")]
public class AccountController : ControllerBase
{
    private ILogger<AccountController> _logger;
    private IAccountService _accountService;
    
    public AccountController(ILogger<AccountController> logger, IAccountService accountService)
    {
        _logger = logger;
        _accountService = accountService;
    }

    [HttpPost(Name = "login")]
    public async Task<IActionResult> Login(LoginModel model)
    {
        var response = await _accountService.Login(model);
       
        return Ok(response);
    }
}

初始Angular请求代码 #

@Injectable({
  providedIn: 'root'
})
export class AccountService {

  constructor(private http: HttpClient) { }

  login(credentials: Credential) {
    this.http.post<AuthResponse>('/account/login', credentials).subscribe({
      next: (n) => console.log(n),
      error: (e) => console.error(e),
      complete: () => console.info('complete') 
  })
  }
}

更新后的proxy.config.js #

const PROXY_CONFIG = [
  {
    context: [
      "/weatherforecast",
      "/Account/Login"
    ],
    target: "https://localhost:7276",
    secure: false
  }
];

module.exports = PROXY_CONFIG;

更新后的Angular请求代码 #

login(credentials: Credential) {
    this.http.post<AuthResponse>('/Account/Login', credentials).subscribe({
      next: (n) => console.log(n),
      error: (e) => console.error(e),
      complete: () => console.info('complete') 
  })
  }

更新后的API代码 #

[ApiController]
[AllowAnonymous]
[Route("[controller]")]
public class AccountController : ControllerBase
{
    private ILogger<AccountController> _logger;
    private readonly IAccountService _accountService;


    public AccountController(ILogger<AccountController> logger, IAccountService accountService)
    {
        _logger = logger;
        _accountService = accountService;

    }

    [HttpPost]
    [Route("Login")]
    public async Task<IActionResult> Login(LoginModel model)
    {

        var response = await _accountService.Login(model);

        return Ok(response);
    }

}

排查步骤与解决方案 #

1. 修正API路由与代理配置的匹配逻辑 #

更新后的API路由为POST /Account/Login，但代理配置仅匹配/Account/Login单一路径，后续新增端点会重复出现404。修改proxy.config.js为批量匹配规则，并添加跨域关键配置：

const PROXY_CONFIG = [
  {
    context: [
      "/weatherforecast",
      "/account/**" // 匹配所有/account开头的请求路径
    ],
    target: "https://localhost:7276",
    secure: false,
    changeOrigin: true // 解决目标服务器主机头校验问题
  }
];

module.exports = PROXY_CONFIG;

2. 确认Angular代理配置加载生效 #

检查angular.json的serve节点是否指定了代理文件，修改后必须重启Angular开发服务器：

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "你的项目名:build",
      "proxyConfig": "proxy.config.js" // 确保此行存在
    }
  }
}

3. 验证API端点本身可用性 #

跳过Angular，用Postman直接发送POST https://localhost:7276/Account/Login请求（携带LoginModel格式的JSON参数）：

• 如果仍返回404，检查API项目的Program.cs是否添加了app.MapControllers();中间件；
• 确认Account控制器为public类，若控制器在单独类库中，需在Program.cs中注册程序集：

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

4. 检查浏览器实际请求路径 #

打开浏览器开发者工具（F12）的网络标签，确认请求是否被代理到https://localhost:7276：

• 若请求仍发送到Angular端口（如4200），说明代理配置未生效，需重启Angular服务；
• 若已代理到7276但仍404，回到API端排查路由冲突或控制器注册问题。

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