Angular6 HttpClient Post method not working although Postman is successful?

Question

Code for my postmethod below:

  postMetadata(titleParam, rankParam) {

    let headers = new HttpHeaders();
    headers = headers.append(
      "Authorization",
      "Bearer " + this.adalService.userInfo.token
    );

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

    const params = new HttpParams()
    .append("title", titleParam)
    .append("rank", rankParam)
    .append("createdBy", "Test");

    console.log(params, headers);
    return this.http.post(this.ROOT_URL + "bms/metadata", {
      "title": titleParam,
      "rank": rankParam,
      "createdBy": "Test"
    }, { headers })

}

I have tried to also put { params } and just use that HttpParams object there, same result. Have also tried putting them one after another { params, headers } in which case I get 'unauthorized' which i'm sure its because it cant parse the whole thing right and the token gets mixed up.

With postman, I've copy pasted the token from the console to be able to make the request and everything works well, things are added in the database.

The exact error for the request on the backend in the case of Angular is:

Error updating the dataabase  { RequestError: Invalid column name 'undefined'.

And if I try to log on the console the req.query.title and so on, all I'm getting is 'undefined' everywhere.

The backend up is essentially express + mssql (tedious.js) + passport-azure-ad.

Answer 1

I've been stuck on this for hours and once again, solved within minutes of posting on stack.

I had to set the following:

  "Content-Type",
  "application/json"

for some odd reaason, I'm getting an error in the console though? Will investigate further. Error:

EDIT: Fixed as well, here's the full final working code of the HttpClient service request:

  postMetadata(titleParam, rankParam) {

    let headers = new HttpHeaders();
    headers = headers.append(
      "Authorization",
      "Bearer " + this.adalService.userInfo.token
    );

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


    let body = { "title": titleParam, "rank": rankParam, "createdBy": "TestingCreation" }
    const data = JSON.stringify(body);

    return this.http.post(this.ROOT_URL + "bms/metadata",   data , { headers, responseType: 'text' })

}