Angular 6: Unable to set Content-Type of http Header correctly

Question

I'm trying to make a post call using HttpHeader in angular 6 And I set Content-Type to application/json. But the server get x-www-form-urlencoded instead of application/json for Content-Type.

service.ts

   
myFunction(id: string, name: string, fields: string[]) {
  const body = {
    id: id,
    name: name,
    fields: fields
  };
  let headers = new HttpHeaders();
  headers= headers.set('content-type', 'application/json');
  return this.http.post(this.URL , body, {headers});
}

component.ts

submit(){
  this.myService.myFunction(this.id, this.form.value.name,  
  this.form.value.fields).subscribe((res:any) => {
    console.log(this.form);
  }, error => {
    console.log(JSON.parse(error.error).errors);
  })
}

milo526 · Accepted Answer · 2020-08-05 14:13:31Z

18

You need to set headers in option.

return this.http.post(this.URL , body, {headers : new HttpHeaders({ 'Content-Type': 'application/json' })});

edited Aug 5, 2020 at 14:13

milo526

5,1135 gold badges47 silver badges63 bronze badges

answered Dec 4, 2018 at 18:09

MesutAtasoy

8222 gold badges14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahal Danthanarayana · Accepted Answer · 2024-05-01 20:10:56Z

8

Just use append function to add new headers and finally set the headers on options

Try something like this,

let headers = new HttpHeaders();
headers= headers.append('content-type', 'application/json');
return this.http.post(this.URL, body, {headers : header});

If it doesn't work try to add header like this,

let headers = new HttpHeaders({'content-type': 'application/json'});

Hope it helps. Happy coding :)

edited May 1, 2024 at 20:10

Rahal Danthanarayana

74415 silver badges30 bronze badges

answered Dec 4, 2018 at 18:27

Rahul

2,1382 gold badges14 silver badges30 bronze badges

1 Comment

ammasum Over a year ago

I think it will be let headers and {headers: headers} or es6 {headers}

Collectives™ on Stack Overflow

Angular 6: Unable to set Content-Type of http Header correctly

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related