Angular Http Post funktioniert nicht. Fehler: Nicht unterstützter Medientyp

Question

Ich habe die folgende Methode auf einem Web-api asp.net Kern App

Api post-Methode:

// POST api/values 
[HttpPost] 
public string Post([FromBody] List<ValuesToPost> values) 
{ 
    return values.Count.ToString(); 

} 

es funktioniert mit Postman: POST JSON (application/json) Body -> raw:

[{ 
    Value: "asd", 
    Column:2, 
    Row:1, 
    IsPostBack: true 
}, 
{ 
    Value: "assddfs", 
    Column:2, 
    Row:1, 
    IsPostBack: true 
}] 

Und auf meine Angular App:

ComponentOne

sendDataToTheServerByPost(arrayOfObjects: any) { 

     this.dataService.postData(arrayOfObjects).subscribe(event => { 
     console.log("post"); 

     }); 

    } 

DataService.ts

 public postData(body: any): Observable<any> { 

     let bodyToSend = JSON.stringify(body); 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     headers.append('Accept', 'application/json'); 

     return this.http.post(this.DataUrl, bodyToSend, { headers: headers }).map((response: Response) => { 
      return response.json().data; 
     }).catch(this.handleError); 
    } 

ich auf der Chrome-Konsole den folgenden Fehler bin Empfang:

Error 
    zone.js:2622 OPTIONS http://localhost:8080/api/values 415 (Unsupported Media Type) 

Was ich bin ich fehlt, In Postman den Aufruf der API Post-Methode funktioniert, aber nicht aus eckigen App. Alle laufen auf demselben Dev-Computer. CORS Problem Ich glaube nicht, weil Get Methode gut funktioniert. Oder liege ich falsch? Vorschläge?

Answer 1

GELöST

Am Ende nichts mit kantigem falsch war. Es war ein CORS-Problem. Offenbar gibt es verschiedene Möglichkeiten, damit umzugehen, ich habe es auf web.config als die älteren Versionen von Web API getan. Nach dem Untersuchen und Testen habe ich einen gut erklärten Weg here auf Rick Strahls Weblog gefunden. Der erste Kommentar zur Post bezieht sich auf den GitHub Repo, der eine gut konfigurierte ASpNetCore App mit Angular besitzt. Für den Fall, andere das gleiche Problem mit

Answer 2

ich gleiche Ausgangsbuchung das folgende Objekt

let song = { 
    title : this.title.value, 
    url: this.url.value, 
    artist: this.artist.value 
}; 

this.service.create(song) 
    .subscribe(response => console.log(response)); 

hatte bekam ich es ausdrücklich typecasting jedes Element des Objekts als Arbeits:

let song = { 
    title : this.title.value as string, 
    url: this.url.value as string, 
    artist: this.artist.value as string 
}; 

this.service.create(song) 
    .subscribe(response => console.log(response));