Unable to update API with HttpHeader in ANGULAR4

Question

I am trying to update element through POST method. No matter what I do I still have some problem and I am unable to edit an item. API requires to get information about encoding : Content-Type: application/json; charset=UTF-8 so I am sending it inside the options.

editSensor(sensor){
const body = {"sensor_UID": sensor.sensor_UID, "sensor_ID": sensor.sensor_ID, "sensor_Name": sensor.sensor_Name};
var options = { headers: new HttpHeaders({ 'Content-Type': 'application/json; charset=UTF-8' })};
this.http.post('http://172.22.20.112/api/sensor/update', body, options)
  .subscribe(data => {
    console.log(data);
  }, error => {
    console.log("problem with something");
  });

}

I am getting

Failed to load http://172.22.20.112/api/sensor/update : Response for preflight has invalid HTTP status code 404

and

OPTIONS http://172.22.20.112/api/sensor/update 404 (Not Found)

I am using HttpHeaders. It should be a better than old Headers right? What I am doing wrong here? I've spend last 3 hours trying to figure it out and there is just one problem after another.

I tried to edit through the Fiddler and it worked so problem is on my side.

Answer 1

Can you try as below

import {Headers} from '@angular/http'

declare a variable in class as below

header:Headers

and in your method

this.header=new Headers();
this.header.append("Content-Type",'application/json; charset=UTF-8");

this.http.post('http://172.22.20.112/api/sensor/update', body, {headers:this.header})