Angular4调用Spring Boot POST接口报400错误：请求体缺失

这种问题我碰到过好几次，Postman能正常调用但前端不行，说明后端接口本身是没问题的，问题大概率出在Angular请求的构造上。咱们一步步排查解决：

1. 检查Angular POST请求的参数顺序是否正确 #

Angular的HttpClient.post方法参数顺序很关键，第一个是接口URL，第二个是请求体payload，第三个才是请求配置（比如headers、params）。很多人会不小心把payload漏掉或者放错位置，导致请求根本没带body。

错误示例：

// 错误：把headers当成了请求体
this.http.post('/api/users', { headers: new HttpHeaders().set('Content-Type', 'application/json') })

正确示例：

import { HttpClient, HttpHeaders } from '@angular/common/http';

// 假设要发送的用户数据
const userPayload = {
  username: 'test',
  email: 'test@example.com'
};

// 可选：如果需要手动设置headers（HttpClient默认会为JSON对象自动设置Content-Type）
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });

this.http.post('/api/users', userPayload, { headers: headers })
  .subscribe(response => {
    console.log('请求成功', response);
  }, error => {
    console.error('请求失败', error);
  });

2. 确认请求头Content-Type是否匹配后端期望 #

Spring Boot用@RequestBody接收参数时，默认期望请求的Content-Type是application/json。如果Angular发送的请求是form-data或者x-www-form-urlencoded格式，Spring就无法解析请求体，从而抛出"Required request body is missing"错误。

怎么验证？ #

打开浏览器的开发者工具（F12），切换到Network面板，找到你的POST请求，查看：

• Headers里的Content-Type是不是application/json
• Payload或Request Body里有没有你要发送的JSON数据

如果发现Content-Type不对，要么调整Angular的请求头，要么修改后端接口适配对应的格式。

3. 检查后端接口的注解是否正确 #

虽然Postman能正常调用，但还是确认下后端接口是否正确使用了@RequestBody注解。比如：

正确的后端接口示例：

@RestController
@RequestMapping("/api/users")
public class UserController {

    @PostMapping
    public ResponseEntity<User> createUser(@RequestBody UserDto userDto) {
        // 处理逻辑
        return ResponseEntity.ok(new User());
    }
}

如果你的后端接口没加@RequestBody，而是用@RequestParam接收参数，那Postman用form-data能成功，但Angular发JSON就会失败——不过这种情况Postman发JSON也会失败，所以大概率你是加了的，但还是确认下更稳妥。

4. 避免用FormData发送JSON请求 #

如果你的后端是接收JSON格式，就不要用FormData来构造请求体。FormData会默认把Content-Type设为multipart/form-data，Spring的@RequestBody无法解析这种格式的数据。

错误示例：

const formData = new FormData();
formData.append('username', 'test');
this.http.post('/api/users', formData); // 后端用@RequestBody接收会失败

如果确实需要发送FormData，那后端要改成用@RequestParam或者@ModelAttribute接收，或者使用MultipartFile处理文件上传场景。

最后调试小技巧 #

如果还是找不到问题，把Angular发送的请求复制成cURL，然后在终端运行，看看能不能复现错误。或者把Postman的请求也复制成cURL，对比两个请求的差异——差异点就是问题所在。

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