Angular发送带JSON体的DELETE请求报错：No overload matches this call

报错信息翻译 #

没有匹配此调用的重载

问题原因 #

Angular 的 HttpClient.delete() 方法参数结构和 post() 不一样：

• post(url, body, options)：第二个参数直接是请求体
• delete(url, options)：第二个参数是请求配置对象，请求体需要放在配置对象的 body 属性中

你直接把 JSON 字符串作为第二个参数传入，不符合 delete() 方法的参数定义，所以触发了重载不匹配的报错。

修正后的代码 #

delReq(req: IReq): Observable<IReqResponse> {
  const url = this.utils.surl;
  // 将请求体放在配置对象的 body 属性中，HttpClient 会自动序列化
  return this.http.delete<IReqResponse>(url, { body: req })
    .pipe(catchError(this.handleError<IReqResponse>('delReq')));
}

补充说明 #

如果后端不支持 DELETE 请求携带请求体（部分后端框架对 DELETE 带 body 的兼容性不好），可以改用查询参数传递数据：

import { HttpParams } from '@angular/common/http';

delReq(req: IReq): Observable<IReqResponse> {
  const url = this.utils.surl;
  // 将请求对象转为查询参数
  const params = new HttpParams({ fromObject: req });
  return this.http.delete<IReqResponse>(url, { params })
    .pipe(catchError(this.handleError<IReqResponse>('delReq')));
}

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