fetch() POST Request, data becomes object key

Question

Has anyone had an issue with sending a POST fetch request where the JSON String becomes the Object Key on the recieving end, specifically using { "Content-Type": "application/x-www-form-urlencoded" } for a header.

I have also tried to use CircularJSON to try and fix any circular references that stringify may have created because NodeJS was spitting type errors when the JSON was received.

Client side code:

/* Triggered on a button click */
triggerTransfer(product) {

    let headers = {
        body: CircularJSON.stringify(product),
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        method: "POST"
    }

    this.setState({
        transferState: {
    /* State changes*/
        }
    })

    fetch( _API + '/products/transfer', headers)
        .then(res => {
            return res.json()
        })
        .then((res) => {
            console.log(res)
            this.setState({
                transferState: {
        /* State changes*/
                }
            })
        })
        .catch(err => this.setState({ error: err }))
}

Server Side Route (Please note that I am using body-parser as well), I know this route doesn't do anything, but this was just to help debug the issue:

router.post('/transfer', async (req,res,next)=>{
  console.log(req.body);
  res.json(req.body);
})

When sent from the client side the JSON String looks like this:

{
  "id": 1127,
  "identifier": "CABLE-RJ45-NETWORK-TESTER",
  "description": "CABLE-RJ45-NETWORK-TESTER",
  "price": 50,
  "cost": 35,
  "vendor": {
    "id": 104,
    "identifier": "",
    "name": "",
    "_info": {
      "company_href": ""
    }
  },
  "_info": {
    "lastUpdated": "2012-08-30T05:37:13Z",
    "updatedBy": ""
  }
}

When received on the service side the object looks like this:

{
  '{"id":1127,"identifier":"CABLE-RJ45-NETWORK-TESTER","description":"CABLE-RJ45-NETWORK-TESTER","price":50,"cost":35,"vendor":{"id":104,"identifier":"","name":"","_info":{"company_href":""}},"_info":{"lastUpdated":"","updatedBy":""}}': ''
}

Notice that the JSON string sent from the client side is now the object key :(

Any help would be awesome

You're setting body to a string and you are setting the content type to form encoded, which doesn't make any sense. Do you want to send key/value pairs or JSON? — Ruan Mendes, Aug 14 '18 at 23:11
I just need to access that object on the server side, which would you recommend and the method to make this happen? — Chris Talke, Aug 14 '18 at 23:16
I would send it as JSON and read the body as a string by setting the correct HTTP headers for application/json. See https://stackoverflow.com/questions/29775797/fetch-post-json-data — Ruan Mendes, Aug 15 '18 at 11:47

score 0 · Answer 1 · answered Aug 14 '18 at 23:18

0

All good, fixed this by changing the headers and stepping away from encoding:

    let headers = {
        body: CircularJSON.stringify(product),
        headers: { "Content-Type": "application/json" },
        method: "POST"
    }

answered Aug 14 '18 at 23:18

Chris Talke

120
1
8

fetch() POST Request, data becomes object key

1 Answers1