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.

Answer 1

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

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