Angular 12向Spring Boot 2.5.5传递JSON的POST请求异常如何解决？

问题根因 #

Angular 的 HttpClient 提供的 HTTP 方法返回的都是冷Observable，只有主动订阅才会真正发起HTTP请求，你当前的代码没有订阅post返回的Observable，所以请求根本没发送到后端，这是POST功能失效的核心原因。

修复步骤 #

1. 修改 users.service.ts

HttpClient 会自动将JS对象序列化为JSON，也会自动添加Content-Type: application/json请求头，不需要手动处理冗余逻辑，同时将addNewUser方法改为返回Observable供组件侧订阅：

// 其他导入保持不变
addNewUser(user: User): Observable<any> {
  // 无需手动转JSON、无需手动加请求头
  return this.http.post("http://localhost:8080/user/add", user);
}

2. 修改 Users Component 的 onSubmit 方法

调用addNewUser后添加订阅逻辑，触发请求执行：

onSubmit(): void {
  let name = this.checkoutForm.get('name')?.value;
  let lastname = this.checkoutForm.get('lastname')?.value;

  let user: User = {
    "name": name,
    "lastname": lastname
  };

  console.log(user);
  // 添加订阅逻辑触发请求发送
  this.usersService.addNewUser(user).subscribe({
    next: res => console.log('请求成功，后端返回：', res),
    error: err => console.error('请求失败：', err)
  });
}

其他冗余问题修复 #

以下问题不影响当前POST功能，但建议同步修正：

• 组件ngOnInit里调用的getUtenti()方法不存在，实际定义的方法是getUsers()，修改成正确的方法名即可正常拉取用户列表。
• 后端addUser接口可以直接用@RequestBody User user接收参数，Spring Boot会自动反序列化JSON为User实体对象，不需要手动解析字符串，更方便后续业务处理。

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