Angular17调用Asp.Net Core API出现404错误求助

一、先修正Angular代码中的明显错误 #

• 方法名不匹配：onLogin中调用的getEmployeeDataByClock未定义，实际定义的方法是getEmployeeData，需统一方法名；
• 变量未定义：getEmployeeData方法内使用了未声明的clockNo变量，应替换为方法参数input，即修改为${this.apiUrl}api/Employees/GetEmpNameByClock?clockNo=${input}；
• 端口不一致：Angular配置的apiUrl是https://localhost:44612/，但错误请求的端口是44359，需确认后端实际运行的HTTPS端口（查看后端launchSettings.json中的applicationUrl），并同步修改Angular的apiUrl。

二、后端API路由与控制器排查 #

• 确认EmployeesController存在：需创建继承自ControllerBase的EmployeesController，并添加路由特性，示例：

  [Route("api/[controller]")]
  [ApiController]
  public class EmployeesController : ControllerBase
  {
      private readonly MyEntity _context;
  
      public EmployeesController(MyEntity context)
      {
          _context = context;
      }
  
      [HttpGet("GetEmpNameByClock")]
      public async Task<IActionResult> GetEmpNameByClock([FromQuery] string clockNo)
      {
          // 业务逻辑：根据clockNo查询Employee
          var employee = await _context.Employee.FirstOrDefaultAsync(e => e.ClockNo == clockNo);
          return Ok(employee?.EmpName);
      }
  }
  

• 检查方法路由特性：GetEmpNameByClock方法需添加[HttpGet("GetEmpNameByClock")]，确保路由匹配api/Employees/GetEmpNameByClock；
• 直接测试后端API：在浏览器或Postman中访问https://localhost:[后端实际端口]/api/Employees/GetEmpNameByClock?clockNo=7284，若仍返回404，说明后端路由配置有误，需检查控制器路由、方法路由的拼写与结构。

三、跨域（CORS）配置排查 #

由于前后端端口不同，需在Asp.Net Core中配置CORS：

1. 在ConfigureServices中添加CORS服务：

   services.AddCors(options =>
   {
       options.AddPolicy("AllowAngularOrigin", policy =>
       {
           policy.WithOrigins("https://localhost:[前端端口]") // 替换为Angular实际运行端口
                 .AllowAnyMethod()
                 .AllowAnyHeader();
       });
   });
   

2. 在Configure中启用CORS（注意顺序：在UseRouting之后，UseAuthorization之前）：

   app.UseCors("AllowAngularOrigin");
   

四、其他排查点 #

• 检查后端启动状态：确保后端服务正常运行，无启动报错；
• 路由大小写问题：虽然URL不区分大小写，但需确保控制器名（Employees）、方法名（GetEmpNameByClock）的拼写与Angular请求一致；
• 确认DbContext注入正常：EmployeesController的构造函数需正确注入MyEntity，确保后续查询数据库逻辑能正常执行（此点影响数据返回，但需先解决404问题）。

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