express http body becoming key in key:value-pair

Question

I'm having some trouble with my Angular 2 http.post-request.

let body = JSON.stringify({user:'username', passw:'mypass'});
let headers = new Headers();

headers.append('Content-Type', 'application/x-www-form-urlencoded');

this.http.post(`http://localhost:8090/api2/drawing/12345`, body, {headers: headers}) //TODO: remove localhost
  .subscribe((res: Response)=>{
    this.data = res.json();
    console.log(this.data);
  })

In my express-app, with bodyparser, the request body looks like this:

{ '{"user":"username","passw":"mypass"}': '' }

when I would expect it to look more like this:

{ user:"username", passw:"mypass" }

I have configured bodyParser like so:

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

Where have I gone wrong?

Thanks!

Answer 1

You're sending a JSON-encoded body with a mismatched Content-Type of application/x-www-form-urlencoded . If you want to keep the JSON body, change this:

headers.append('Content-Type', 'application/x-www-form-urlencoded');

to this:

headers.append('Content-Type', 'application/json');