Angular 14调用.NET Core API保存员工数据失败求助

首先，先给Angular请求添加错误回调，明确具体错误信息，修改add-employee.component.ts代码：

addEmployee(){
  this.employeeService.addEmployee(this.addEmployeeRequest)
  .subscribe({
    next: (employee) => {
      console.log(employee);
    },
    error: (err) => {
      console.error('请求错误:', err); // 打印具体错误，精准定位问题
    }
  });
}

结合你的代码，以下是常见问题及对应解决方法：

1. 跨域(CORS)问题 #

前后端分离场景下最常见的错误，Angular前端与.NET Core API运行在不同端口，浏览器会默认阻止跨域请求。

解决方法：
在.NET Core API的Program.cs中配置CORS规则：

var builder = WebApplication.CreateBuilder(args);

// 注册CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngular",
        policy => policy.WithOrigins("http://localhost:4200") // 替换为你的Angular应用地址
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

// 其他服务注册...

var app = builder.Build();

// 在路由之后、授权之前启用CORS
app.UseCors("AllowAngular");

// 中间件配置...

app.Run();

2. 模型属性大小写不匹配 #

Angular代码中使用小写id，但.NET Core的Employee类是大写Id，默认模型绑定区分大小写，会导致属性无法正确映射。

解决方法：

• 方案一：统一属性大小写，修改Angular的Employee接口：

export interface Employee {
  Id: string;
  // 其他属性...
}

同步修改employees.service.ts的赋值代码：

addEmployee(addemployeeRequest: Employee):Observable<Employee>{
  addemployeeRequest.Id = '00000000-0000-0000-0000-000000000000'; // 补全有效空Guid格式
  return this.http.post<Employee>(`${this.baseApiUrl}/api/employees`, addemployeeRequest);
}

• 方案二：在.NET Core中开启不区分大小写的模型绑定：

builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
    });

3. Guid格式无效 #

你在Angular中设置的id是'00000000-0000-0000-0000-00000000'，这不是有效的Guid（缺少最后两位），可能触发模型验证失败。

解决方法：
要么不在前端设置id（完全由后端生成），要么设置为标准空Guid字符串：'00000000-0000-0000-0000-000000000000'。

4. API路由或BaseUrl错误 #

检查employees.service.ts中的baseApiUrl是否包含正确的协议、域名/IP和端口，比如API运行在http://localhost:5000，则baseApiUrl需设为'http://localhost:5000'，确保请求地址为http://localhost:5000/api/employees。

同时确认API的EmployeesController是否配置了正确路由特性：

[Route("api/[controller]")]
[ApiController]
public class EmployeesController : ControllerBase
{
    // 控制器方法...
}

5. 数据库连接或DbContext配置问题 #

如果后端报错，检查appsettings.json中的连接字符串是否正确：

"ConnectionStrings": {
  "DefaultConnection": "Server=.;Database=FullStackDb;Trusted_Connection=True;TrustServerCertificate=True;"
}

并确认Program.cs中已正确注册DbContext：

builder.Services.AddDbContext<FullStackDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

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