Angular 4调用Web API POST接口报415错误求助

我来帮你排查这个问题，从你的代码和错误信息来看，核心问题是请求的Content-Type没有正确设置为application/json，同时请求数据的传递方式也出了问题，导致后端无法识别请求体的格式。

问题分析 #

从错误信息里可以看到：The request entity's media type 'text/plain' is not supported，这说明你的Angular请求实际发送的Content-Type是text/plain，而不是你设置的application/json。另外，你的POST请求同时在URL参数里传递了数据，又在请求体里传了JSON，这不仅冗余，还可能干扰后端的解析逻辑。

修正步骤 #

1. 优化组件代码，封装请求数据

把分散的参数封装成一个对象，更清晰也更容易维护：

fulldetail: Idetails[] = [];
detail: Idetails;

onClick(value: any) {
  // 把数据封装成Idetails对象
  const detailData: Idetails = {
    id: 1,
    name: 'abcd', // 注意这里要加字符串引号
    address: "abcdefgh",
    about: "samplestring",
    number: 18888,
    count: 12.0
  };

  this._Service.CatchDetail(detailData)
    .subscribe(
      details => {
        // 用扩展运算符批量添加数据
        this.fulldetails.push(...details);
      },
      error => {
        console.error(error);
        this.statusMessage = "Problem with the service. Please try again after sometime";
      }
    );
}

2. 修复服务中的POST请求逻辑

移除冗余的URL参数，确保Content-Type正确设置，并且请求体格式符合后端要求：

CatchDetail(detail: Idetails): Observable<Idetails[]> {
  // 后端期望接收List类型，所以把对象包装成数组
  const requestBody = [detail];
  
  const headers = new Headers({
    'Content-Type': 'application/json',
    'Accept': 'application/json' // 加上Accept头，明确告诉后端我们接受JSON格式的响应
  });
  const options = new RequestOptions({ headers: headers });

  // 只传递请求体和headers，不要加多余的params参数
  return this._http.post('http://localhost:1234/api/contrllername/detail', requestBody, options)
    .map((response: Response) => <Idetails[]>response.json())
    .catch(error => {
      console.error('API请求错误:', error);
      return Observable.throw(error);
    });
}

3. 修正后端控制器的类型一致性

注意你的控制器里接收参数的类型是List<spGetDetails_Result>，但定义的实体类是spGetDetails，这里存在类型不匹配的问题，需要修正：

[HttpPost]
public void Detail([FromBody] List<spGetDetails> jsonvalues) { 
  foreach (var datadetail in jsonvalues) {
    // 调用存储过程，注意修正变量名和语法错误
    enqentities.spGetDetails_Result(datadetail.id, datadetail.name, datadetail.address, datadetail.about, datadetail.number, datadetail.count);
  }
}

public class spGetDetails {
  public int id { get; set; }
  public string name{ get; set; }
  public string address{ get; set; }
  public string about{ get; set; }
  public int number{ get; set; }
  public decimal count { get; set; } // 对应Angular里的小数类型，用decimal更合适
}

关键注意点 #

• 不要同时在URL参数和请求体里传递相同的数据，后端用[FromBody]接收时，只会解析请求体里的内容。
• Angular 4中Headers和RequestOptions的配置要正确，确保Content-Type头被正确发送（可以在浏览器的开发者工具里查看Network标签，确认请求头的Content-Type是否为application/json）。
• 确保后端实体类的属性名和Angular里的Idetails属性名完全一致（比如你服务里之前写的nu: number，但实体类里是number，这里的拼写错误要修正）。

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