CODEWITHSUNDEEP
javascriptasp.net-corevuejs2vuexasp.net-core-webapi
Kumar Sabnis
Kumar Sabnis

Reputation: 95

Vue Post function sending null body

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:

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:

enter image description here

screen shot from web service:

enter image description here

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.

Upvotes: 1

Views: 314

Answers (1)

LouraQ
LouraQ

Reputation: 6891

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

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

Upvotes: 1

Related Questions