Angular 14中如何通过HttpClient Post方法发送字符串数组？

使用Angular的HttpClient Post方法向后端发送字符串数组，代码如下：

getAnnouncementsByIds(ids: string[]): Observable<Announcement[]> {
  return this.http.post<Announcement[]>(`${environment.serverUrl}${this.urlGetAnnouncementsByIds}`, ids);
}

出现Http 400错误，错误信息：

JSON parse error: Cannot deserialize value of type [Ljava.lang.String; from Integer value (token JsonToken.VALUE_NUMBER_INT);

已尝试以下方法但未解决：

• 将数字数组转为字符串后添加到HttpParams中
• 添加"Content-Type": "application/json"请求头

1. 确保传入的数组确实是字符串类型 #

检查调用getAnnouncementsByIds时传入的参数，如果是数字数组（比如[1,2,3]），需要显式转换为字符串数组：

// 调用示例
const numericIds = [1, 2, 3];
this.service.getAnnouncementsByIds(numericIds.map(id => id.toString())).subscribe(...);

2. 检查后端接收配置 #

如果后端使用Spring等框架，确保接口方法上添加了@RequestBody注解，并且参数类型匹配字符串数组：

// Spring后端示例
@PostMapping("/announcements/ids")
public List<Announcement> getAnnouncementsByIds(@RequestBody String[] ids) {
    // 业务逻辑
}

如果后端期望的是List<String>，也可以调整参数类型为@RequestBody List<String> ids。

3. 将数组包裹为对象发送 #

部分后端框架对直接接收数组作为请求体的支持有限，可以把数组包裹在一个对象中发送：

getAnnouncementsByIds(ids: string[]): Observable<Announcement[]> {
  return this.http.post<Announcement[]>(`${environment.serverUrl}${this.urlGetAnnouncementsByIds}`, { ids });
}

对应的后端需要定义一个包含String[] ids字段的DTO类来接收：

// 后端DTO示例
public class AnnouncementIdsRequest {
    private String[] ids;
    // getter和setter
}

// 接口方法
@PostMapping("/announcements/ids")
public List<Announcement> getAnnouncementsByIds(@RequestBody AnnouncementIdsRequest request) {
    String[] ids = request.getIds();
    // 业务逻辑
}

4. 验证请求体格式 #

通过浏览器开发者工具的Network面板，查看Post请求的Request Payload，确认发送的是字符串数组（如["1","2","3"]）而非数字数组（如[1,2,3]），确保请求体格式符合后端要求。

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