Why `fetch` turned my JSON string to query string? Side effect? [duplicate]

Question

I have been going through this the whole afternoon, please help me debug.

Client Side:

fetch('/admin/edit/tags', {
    method: 'post',
    credentials: 'same-origin',
    headers: {
        'content-type': 'application/json',
        'accept': 'application/json'
    },
    body: form.getFormData('json')
})...

console.log(form.getFormData('json')); returns {"id":"11","tag":"tag12","submit":"Update"}

Server Side (Node.js):

Code for request handling:

function (req, res) {
    var bufferBody = [];
    req.on('error', err => {
      return res.status(400).send('request error.');
    }).on('data', chunk => {
      bufferBody.push(chunk);
    }).on('end', () => {
      res.on('error', err => {
        return res.status(400).send('response error.');
      });
      req.bufferBody = bufferBody;
      req.stringBody = Buffer.concat(bufferBody).toString();
      //req.json = JSON.parse(req.stringBody);
      req.body = qs.parse(req.stringBody);
    })
}

The Route:

{
    method: 'POST',
    path: '/admin/edit/tags',
    handle: PC(function*(req, res) {
        var data = req.body;
        console.log(data);
        console.log(req.stringBody);
    })
}

This is the buffer string: theBuffer.toString() %7B%22id%22%3A%2211%22%2C%22tag%22%3A%22tag12%22%2C%22submit%22%3A%22Update%22%7D=

This is the query string: qs.parse(theBufferString) { '{"id":"11","tag":"tag12","submit":"Update"}': '' }

I have checked every where, headers are correct. What could be the cause that could turn jsonString to queryString?

I know that I can turn jsObject to queryString, but I really really want to use jsonString.

No, that post is specific to jsfiddle. I have seen that post hours ago. — alexcres
– alexcres, Commented Jul 19, 2017 at 12:16
@AlexBlex That post is specific to jsfiddle, and suggest using query string instead of json string. But isn't fetch is supposed can work with json string? — alexcres
– alexcres, Commented Jul 19, 2017 at 12:25
It has a very valid example of how to POST using fetch and formdata. — Alex Blex
– Alex Blex, Commented Jul 19, 2017 at 12:34
@ŁukaszSzewczak I have added the code for the request, please take a look. — alexcres
– alexcres, Commented Jul 19, 2017 at 12:44

marc_s · Accepted Answer · 2018-01-06 22:17:01Z

0

I figured out the problem. It's on server side.

I write my own request client, and in the client I turned any req.body to query string. Because before I was just following the example: https://nodejs.org/api/http.html (scroll to the end) in Node.js document. So I added req.headers['content-type'] check, if josn, use JSON.stringify, else qs.stringify.

if (options.body) {//solve socket hangup problem
    if (isJSON()) {
    // TODO add more content-type, not just json
    //e.g for forms: application/x-www-form-urlencoded
        options.body = JSON.stringify(options.body);
    }   else {
        options.body = qs.stringify(options.body);
    }
    options.headers['content-length'] = Buffer.byteLength(options.body);
}

edited Jan 6, 2018 at 22:17

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jul 19, 2017 at 13:25

alexcres

532 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why `fetch` turned my JSON string to query string? Side effect? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related