Angular向API发送POST请求时出现[object Object]问题排查

问题描述 #

开发重复订单功能时，已成功获取订单商品数据，但调用POST接口向购物车发送数据时出现500错误，Network请求负载显示products: [object Object],[object Object],...。

相关代码 #

cart.service.ts中的API调用 #

repeatOrder(products: SingleOrder['izdelki']) {
  return from(Preferences.get({key: 'TOKEN_KEY'})).pipe(
    switchMap(token => {
      const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
      const formData: any = new FormData();
      formData.append('products', products);
      return this.httpClient.post(`${environment.apiUrl}cart/repeatorder`, formData, {headers, observe: 'response'});
    }),
    catchError(err => {
      console.log(err.status);
      if (err.status === 400) {
        console.log('Error 400: ', err.error.message);
      }
      if (err.status === 401) {
        this.authService.logout();
        this.router.navigateByUrl('/login', {replaceUrl: true});
      }
      return EMPTY;
    }),
  );
};

order-view.page.ts中的重复购买函数 #

repeatThisPurchase() {
  this.repeatOrderArr= [...this.orderProducts];

  this.cartService.repeatOrder(this.repeatOrderArr).subscribe(
    data => {
      console.log('Data sent to cart: ', data);
    },
    error => {
      console.log('Error', error);
    }
  );
}

触发按钮代码 #

<div class="btn-wrapper">
  <ion-button color="vigros" class="purchase-btn" size="default" type="submit" (click)="repeatThisPurchase()" expand="block">Ponovi nakup</ion-button>
</div>

错误原因 #

问题出在formData.append('products', products)这一行：

• FormData只能直接存储字符串或Blob类型数据，当你传入对象数组时，JavaScript会自动调用toString()方法，把每个对象转为[object Object]，导致后端无法解析正确的商品数据，进而抛出500错误。

解决方案 #

根据后端接口的接收方式，有两种处理方案：

方案1：将商品数组转为JSON字符串后传入FormData #

如果后端接口期望通过FormData接收JSON格式的products参数，修改cart.service.ts中的代码：

const formData: any = new FormData();
// 将对象数组转为JSON字符串
formData.append('products', JSON.stringify(products));

同时后端需要将接收到的字符串再解析为JSON对象。

方案2：直接发送JSON格式请求（推荐） #

如果后端接口支持接收JSON格式的请求体，不需要使用FormData，直接发送JSON数据：

// 移除FormData相关代码，直接发送products数组
return this.httpClient.post(`${environment.apiUrl}cart/repeatorder`, products, {
  headers: headers.set('Content-Type', 'application/json'),
  observe: 'response'
});

这种方式更符合RESTful接口的常规设计，数据传输更清晰。

额外注意事项 #

• 确认后端接口的请求体格式要求，是FormData还是JSON，对应调整前端代码。
• 可以在Network标签中查看请求的Content-Type是否和后端要求一致。

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