Angular调用Spring Boot API提示请求体缺失的问题排查

看起来你遇到的问题根源在于GET请求的使用规范以及Spring Boot和Angular对HTTP请求的处理差异，咱们一步步拆解解决：

核心问题点 #

1. Spring Boot接口的错误用法：@GetMapping搭配@RequestBody是不符合HTTP规范的——GET请求设计上是用来获取资源，通常不携带请求体。虽然Postman允许你给GET请求加body，但浏览器和Angular的HttpClient并不支持这种做法，所以Spring后端会收到空的请求体，抛出required request body is missing错误。
2. Angular的方法调用错误：HttpClient.get()的第二个参数是请求配置（比如headers、params），不是请求体，所以直接传data会触发类型错误No overload matches this call。

解决方案一：改用POST请求（推荐，适合传递复杂参数） #

如果你的接口需要传递结构化的参数，POST是更合适的选择：

修改Spring Boot接口 #

@PostMapping("/searchs")
@CrossOrigin(origins = "http://localhost:4200")
public Collection<SearchFeedDTO> getFeed(@RequestBody String data) {
    System.out.println(data);
    System.out.println("I'm here");
    // 这里替换成你的业务逻辑
    return null;
}

（如果data是JSON对象，建议定义对应的DTO类来接收，比如@RequestBody SearchRequestDTO data，比直接用String更规范）

修改Angular代码 #

// data = {test:"hello"};
getFeed(data): Observable<boolean> {
    return this.http.post<Answer>(`${this.baseUrl}api/searchs/`, data).pipe(
        map(res => true),
        catchError(err => {
            console.error(err);
            return of(false);
        })
    );
}

解决方案二：坚持用GET请求（适合简单参数） #

如果业务上必须用GET，把参数放到URL的查询参数中：

修改Spring Boot接口 #

方式1：用@RequestParam接收单个参数

@GetMapping("/searchs")
@CrossOrigin(origins = "http://localhost:4200")
public Collection<SearchFeedDTO> getFeed(@RequestParam String test) {
    System.out.println(test);
    System.out.println("I'm here");
    return null;
}

方式2：用Map接收多个参数

@GetMapping("/searchs")
@CrossOrigin(origins = "http://localhost:4200")
public Collection<SearchFeedDTO> getFeed(@RequestParam Map<String, String> params) {
    System.out.println(params.get("test"));
    System.out.println("I'm here");
    return null;
}

方式3：用DTO+@ModelAttribute接收结构化参数

先定义DTO：

public class SearchRequestDTO {
    private String test;
    // getter和setter
}

然后修改接口：

@GetMapping("/searchs")
@CrossOrigin(origins = "http://localhost:4200")
public Collection<SearchFeedDTO> getFeed(@ModelAttribute SearchRequestDTO request) {
    System.out.println(request.getTest());
    System.out.println("I'm here");
    return null;
}

修改Angular代码 #

通过params把参数拼到URL中：

// data = {test:"hello"};
getFeed(data): Observable<boolean> {
    return this.http.get<Answer>(`${this.baseUrl}api/searchs/`, {
        params: data // Angular会自动把对象转成查询参数，比如?test=hello
    }).pipe(
        map(res => true),
        catchError(err => {
            console.error(err);
            return of(false);
        })
    );
}

为什么Postman可以正常运行？ #

Postman作为调试工具，没有严格遵循HTTP规范的限制，允许给GET请求添加请求体，但这并不是标准做法，在实际的前端框架（比如Angular）或浏览器环境中是不被支持的，所以不能用Postman的行为作为标准参考哦。

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