Vue Post function sending null body

Question

The front end is built on Vue 2.6.1. I am sending a post request using fetch to get data from my webservice. The call flow is as follows:

Vue page triggers an event
event is then dispatched to a module.
module action calls a service mentioned below.

Code for fetch:

function GetBulkOperationData(tbData) {

const requestOptions = {
    method: 'POST',
    headers: authHeader(),
    body: JSON.stringify({ tbData })
};

return fetch(`${config.apiUrl}/a/b`, requestOptions)
    .then(handleResponse)
    .then(bulkOperationData => {
        return bulkOperationData;
    });
}

screen shot while debugging:

screen shot from web service:

But if i send the same request from Postman the service properly translates the JSON into the object. JSON body constructed in JS is as follows:

"{"tbData":{"draw":1,"sortOn":"lastCommunicationDate","sortBy":"desc","pageNo":1,"pageSize":10,"searchFilters":{"utNumber":"","utModelName":"1234","accountName":"","lastCommunicationDate":"","dateActivated":"","firmwareVersion":"","currentOperationState":""},"data":null}}"

Not sure what i am missing here.

Make sure you are sending Content-Type: application/json and at backend accessing it by .tbData.YOUR_KEY — tbhaxor
@tbhaxor its already there. The auth head function does that. This is what its doing: 'Authorization': 'Bearer ' + user.token, 'Content-Type': 'application/json' — Kumar Sabnis
Is tbData in your model? hard to tell but if the request body was just like this it looks like it would match the model better. {"draw":1,"sortOn":"lastCommunicationDate","sortBy":"desc", ... — Rosco
@Rosco yes it is. Found a solution that works.. remove {} from tbdata. — Kumar Sabnis

LouraQ LouraQ · Accepted Answer · 2020-04-10T06:47:45

Just remove "{}" out of tbData in the body:

    const requestOptions = {
      method: 'POST',
      headers: authHeader(),
      body: JSON.stringify(tbData)
    };

Vue Post function sending null body

1 Answers