Angular 2 - POST does not set Content-Type to application/json (its text/plain)

Question

I create a Contactformular, my simulated server is working, but in the Angular 2, there is my Create-function:

createPatient(Name: string, Nachname: string, Geburtsdatum: string, Strasse: string, Hausnummer: string, Postleitzahl: string, Wohnort: string): Observable<boolean> {
  let patient = {
      Id: 0,
      Name: Name,
      Nachname: Nachname,
      Geburtsdatum: Geburtsdatum,
      Strasse: Strasse,
      Hausnummer: Hausnummer,
      Postleitzahl: Postleitzahl,
      Wohnort: Wohnort
  };
  let body = JSON.stringify(patient);
  let headers = new Headers({ 'Content-Type': 'application/json' });
  let options = new RequestOptions({ headers: headers });
  return this.http.post(this.patientenUrl + "CreatePatient", body, options)
    .map((r: Response) => {
        console.log(r);
        return <boolean>r.json();
    });

The body are not involvd in the Url, so my "server" does not work. Where do I fail?

i always get:

OPTIONS http://localhost:9177/api/v1/CreatePatient
XMLHttpRequest cannot load http://localhost:9177/api/v1/CreatePatient. Response for preflight has invalid HTTP status code 415
EXCEPTION: Response with status: 0 for URL: null
Uncaught Response with status: 0 for URL: null

After some help i get this solution:

createPatient(Name: string, Nachname: string, Geburtsdatum: string, Strasse: string, Hausnummer: string, Postleitzahl: string, Wohnort: string): Observable {
      let patient = {
          Id: 0,
          Name: Name,
          Nachname: Nachname,
          Geburtsdatum: Geburtsdatum,
          Strasse: Strasse,
          Hausnummer: Hausnummer,
          Postleitzahl: Postleitzahl,
          Wohnort: Wohnort
      };
      let body = JSON.stringify(patient);
      let headers = new Headers({ 'content-type': 'application/json', 'accept': 'application/json'});
      let options = new RequestOptions({ headers: headers });
      return this.http.post(this.patientenUrl + "CreatePatient", body, headers)
        .map((r: Response) => {
            console.log(r);
            return r.json();
        });

and now i get my body, but the Content-Type is 'text/plain' so now i always get:

POST http://localhost:9117/api/v1/CreatePatient 415 (Unsupported Media Type)
EXCEPTION: Response with status: 415 Unsupported Media Type for URL: http://localhost:9117/api/v1/CreatePatient
Uncaught Response with status: 415 Unsupported Media Type for URL: http://localhost:9117/api/v1/CreatePatient

My Controller-function for Create:

[Route("[action]")]
            [HttpPost]   
    public JsonResult CreatePatient([FromBody]Patient patient)
                {
                    this.ResStatus.Status = false;
                    var pat = patient;
                    var ida = GetId();
                    //Prüfung ob Customer Leer oder Null
                        pat.Id = (int)ida;
                        patientRepository.Insert(pat);
                        this.ResStatus.Status = true;
                        return Json(this.ResStatus.Status);                
                }

I solve the Problem: i change the wwwroot from the ASP.NET Core into the Angular 2 Project and include the link from index.html that i can refresh without Problems.

Answer 1

Why do you JSON.stringify your 'body'? You don't have to do that, it should work without JSON.stringify()

--

And by that I mean that you should either just send 'patient' or do a "body = patient;" and then send body.

Answer 2

addBookWithObservable(book:Book): Observable<Book> {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(this.url, book, options)
           .map(this.extractData)
           .catch(this.handleErrorObservable);

https://www.concretepage.com/angular-2/angular-2-http-post-example