angular 4 web api post（数据）方法不起作用415错误

Question

我是 angular 4 web api 的新手。我想使用 angular 4 web api 将一些数据保存到数据库中。当我从角度调用 GET 方法时，它工作正常，但不适用于 POST 方法。我收到 415 不支持的媒体类型。一直以来，但是当我使用 postman 时，post 方法工作正常，因为我将内容类型更改为 application/json。但是在角度上它不起作用......我看到很多相同问题的问题，但它们对我不起作用。在这里，我添加了一些硬编码数据。

这是我的组件 ts 文件：

   fulldetail: Idetails[] =[];
detail: Idetails;
  onClick(value:any) {


       \\hardcoded data
        this.id = 1;
       this.name= abcd;
        this.address= "abcdefgh";
        this.about= "samplestring";
        this.number= 18888;
        this.count = 12.0;

  this._Service.CatchDetail(this.id, this.name, this.address, 
this.about, this.number, this.count)
           .subscribe(detail=> {
                detail.forEach(value => {
                    this.fulldetails.push(value)
           });
        },
            error => {
                console.error(error);
                this.statusMessage = "Problem with the service.Please try again after sometime";

        });

这是我的服务 .ts 代码：

CatchDetail(id: number, name: string, address: string, 
about: string, number: number, count: number)
    : Observable<Idetails[]> {
      let data= JSON.stringify([{ id: id, name: name, address: address, about: about, nu: number, count: count }]);
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this._http.post('http://localhost:1234/api/contrllername/' + 'detail', data,
        {
            params: [{ id: id, name: name, address: address, about: about, nu: number, count: count }]
        })
        .map((response: Response) => <Idetails[]>response.json())
        .catch(this.handleError)
}

这是 workdetails.ts（类）：

export class Idetails {
constructor(
    public id: number,
    public name: string,
    public address: string,
    public about: string,
    public number: number,
    public count: number
  ) { }
}

这是我的控制器：

   [HttpPost]
    public void Detail([FromBody] List<spGetDetails_Result> jsonvalues)

    {


        foreach (spGetDetails_ResultDatadetail in jsonvalues)
        {
            spGetDetails_ResultDetailobject = new spGetDetails_Result();

            Detailobject.id = Datadetail.id;
            Detailobject.name= Datadetail.name;
            Detailobject.address= Datadetail.address;
            Detailobject.about= Datadetail.about;
            Detailobject.number= Datadetail.number;
            Detailobject.count = Datadetail.count;

            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 int count { get; set; }

    }
}

zone.js:2933 POST http://localhost:1234/api/controllername/Detail?id=1&name=abc&address=hj1hgj368&about=dfghjkl&number=31&count=3 415（不支持的媒体类型）。 身体 ： "{"Message":"此资源不支持请求实体的媒体类型 'text/plain'。","ExceptionMessage":"没有 MediaTypeFormatter 可用于从包含媒体的内容中读取类型为 'List`1' 的对象输入“文本/纯文本”............等

Answer 1

我今天遇到了这个问题，并通过简单地将 Web API 项目托管在 IIS 而不是 IIS Express 中解决了这个问题。即使来自 Angular 的请求实际上是正确的，它也只是在返回 415 的 OPTIONS 请求中失败。

Answer 2

我看到了几个问题：

1. 您的控制器返回void，而您的角度则期待响应.map(res => res.json());
2. List<spGetDetails_Result> 在您的控制器中，但您有 spGetDetails 类。
3. 我相信您正在从您的帖子请求中发送一个对象，但在您的控制器中，您期待 List<T>
4. 您正在向http://localhost:1234/api/contrllername/' + 'detail 发送发布请求，您的控制器是否名为contrllername？除非您设置了正确的路由，否则/detail 会触发您的操作Stock？
5. 我也不认为你需要stringify，你可以简单地传递你的Idetails对象，它会映射到spGetDetails

Answer 3

如果你的服务是这样的，必须工作

constructor(httpClient:HttpClient){}
CatchDetail(id: number, name: string, address: string,
           about: string, number: number, count: number)
    : Observable<Idetails[]> {
      let data= [
           { 
             id: id, 
             name: name, 
             address: address, 
             about: about, 
             nu: number, 
             count: count
           }];
    return this.httpClient.post('http://localhost:1234/api/contrllername/detail'
        , data)
}

Answer 4

我认为您只是忘记将标头添加到请求中。

使用 httpClient 代替 Http（Angular 4.3+）：

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

const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
};
return this.httpClient
           .post(url, data, httpOptions ) <-----
           .subscribe((response: Response) => {
               // do what you want with the response.
           });
           // you do not have to parse to JSON with httpClient!

如果您无法使用 httpClient，请查看以下帖子：
https://stackoverflow.com/a/46172188/243896