Fetch POST json data

Question

I m trying to POST a JSON object using fetch   From what I can understand  I need to attach a stringified object to the body of the request  e g    fetch   echo json          headers           Accept    application json          Content-Type    application json             method   POST       body  JSON stringify  a  1  b  2       then function res   console log res      catch function res   console log res       When using jsfiddle s json echo I d expect to see the object I ve sent   a  1  b  2   back  but this does not happen - chrome devtools doesn t even show the JSON as part of the request  which means that it s not being sent

User · Answer

This is related to Content-Type  As you might have noticed from other discussions and answers to this question some people were able to solve it by setting Content-Type   application json   Unfortunately in my case it didn t work  my POST request was still empty on the server side   However  if you try with jQuery s   post   and it s working  the reason is probably because of jQuery using Content-Type   x-www-form-urlencoded  instead of application json    data   Object keys data  map key   gt  encodeURIComponent key          encodeURIComponent data key    join   amp    fetch   api          method   post        credentials   include        body  data       headers    Content-Type    application x-www-form-urlencoded

User · Answer

From search engines  I ended up on this topic for non-json posting data with fetch  so thought I would add this   For non-json you don t have to use form data  You can simply set the Content-Type header to application x-www-form-urlencoded and use a string   fetch  url here         method   POST       headers    Content-Type   application x-www-form-urlencoded       this line is important  if this content-type is not set it wont work     body   foo bar amp blah 1        An alternative way to build that body string  rather then typing it out as I did above  is to use libraries  For instance the stringify function from query-string or qs packages  So using this it would look like   import queryString from  query-string      import the queryString class  fetch  url here         method   POST       headers    Content-Type   application x-www-form-urlencoded       this line is important  if this content-type is not set it wont work     body  queryString stringify  for  bar   blah 1     use the stringify object of the queryString class

User · Answer

It might be useful to somebody   I was having the issue that formdata was not being sent for my request  In my case it was a combination of following headers that were also causing the issue and the wrong Content-Type   So I was sending these two headers with the request and it wasn t sending the formdata when I removed the headers that worked     X-Prototype-Version     1 6 1    X-Requested-With     XMLHttpRequest     Also as other answers suggest that the Content-Type header needs to be correct   For my request the correct Content-Type header was       Content-Type    application x-www-form-urlencoded  charset UTF-8    So bottom line if your formdata is not being attached to the Request then it could potentially be your headers  Try bringing your headers to a minimum and then try adding them one by one to see if your problem is rsolved

User · Answer

I have created a thin wrapper around fetch   with many improvements if you are using a purely json REST API      Small library to improve on fetch   usage const api   function method  url  data  headers          return fetch url        method  method toUpperCase        body  JSON stringify data       send it as stringified json     credentials  api credentials      to keep the session on the request     headers  Object assign     api headers  headers      extend the headers      then res   gt  res ok   res json     Promise reject res           Defaults that can be globally overwritten api credentials    include   api headers        csrf-token   window csrf              only if globally set  otherwise ignored    Accept    application json            receive json    Content-Type    application json      send json        Convenient methods   get    post    put    delete   forEach method   gt      api method    api bind null  method         To use it you have the variable api and 4 methods   api get   todo   then all   gt                    And within an async function   const all   await api get   todo             Example with jQuery       like   on  click   async e   gt      const id   123      Get it however it is better suited    await api put   like   id      like  true           Whatever      e target  addClass  active dislike   removeClass  like

User · Answer

you can use fill-fetch  which is an extension of fetch  Simply  you can post data as below  import   fill   from  fill-fetch    const fetcher   fill     fetcher config timeout   3000  fetcher config maxConcurrence   10  fetcher config baseURL    http   www github com    const res   await fetcher post        a  1          headers             bearer    1234

User · Answer

If your JSON payload contains arrays and nested objects  I would use URLSearchParams  and jQuery s param   method   fetch   somewhere       method   POST     body  new URLSearchParams   param payload        To your server  this will look like a standard HTML  lt form gt  being POSTed

User · Answer

With ES2017 async await support  this is how to POST a JSON payload    x000D   x000D   async      gt    x000D    const rawResponse   await fetch  https   httpbin org post     x000D      method   POST   x000D      headers    x000D         Accept    application json   x000D         Content-Type    application json  x000D         x000D      body  JSON stringify  a  1  b   Textual content    x000D        x000D    const content   await rawResponse json    x000D   x000D    console log content   x000D        x000D   x000D   x000D    Can t use ES2017  See  vp art s answer using promises  The question however is asking for an issue caused by a long since fixed chrome bug  Original answer follows      chrome devtools doesn t even show the JSON as part of the request   This is the real issue here  and it s a bug with chrome devtools  fixed in Chrome 46   That code works fine - it is POSTing the JSON correctly  it just cannot be seen      I d expect to see the object I ve sent back   that s not working because that is not the correct format for JSfiddle s echo   The correct code is   var payload         a  1      b  2     var data   new FormData    data append   json   JSON stringify  payload       fetch   echo json          method   POST       body  data     then function res   return res json        then function data   alert  JSON stringify  data          For endpoints accepting JSON payloads  the original code is correct

User · Answer

You only need to check if response is ok coz the call not returning anything  var json         json  JSON stringify           a  1          b  2             delay  3     fetch   echo json          method   post       headers             Accept    application json  text plain                 Content-Type    application json             body   json     encodeURIComponent JSON stringify json json       amp delay     json delay     then  response    gt   if response ok  alert  quot the call works ok quot       catch  function  error        console log  Request failed   error

User · Answer

I think your issue is jsfiddle can process form-urlencoded request only     But correct way to make json request is pass correct json as a body    x000D   x000D  fetch  https   httpbin org post     x000D    method   post   x000D    headers    x000D       Accept    application json  text plain        x000D       Content-Type    application json  x000D       x000D    body  JSON stringify  a  7  str   Some string   amp   amp     x000D     then res  gt res json    x000D     then res   gt  console log res    x000D   x000D   x000D

User · Answer

The top answer doesn t work for PHP7  because it has wrong encoding  but I could figure the right encoding out with the other answers  This code also sends authentication cookies  which you probably want when dealing with e g  PHP forums   julia   function juliacode        fetch  julia php             method   POST           credentials   include      send cookies         headers                 Accept    application json  text plain                       Content-Type    application json               Content-Type    application x-www-form-urlencoded  charset UTF-8     otherwise   POST is empty                    body   juliacode     encodeURIComponent juliacode              then function response            return response json        text                then function myJson            console log myJson

User · Answer

Had the same issue - no body was sent from a client to a server   Adding Content-Type header solved it for me   var headers   new Headers     headers append  Accept    application json       This one is enough for GET requests headers append  Content-Type    application json       This one sends body  return fetch   some endpoint         method   POST       mode   same-origin       credentials   include       redirect   follow       headers  headers      body  JSON stringify           name   John           surname   Doe             then resp   gt               catch err   gt

User · Answer

I think that  we don t need parse the JSON object into a string  if the remote server accepts json into they request  just run   const request   await fetch    echo json       headers         Content-type    application json         method   POST     body    a  1  b  2         Such as the curl request  curl -v -X POST -H  Content-Type  application json  -d   data json    echo json    In case to the remote serve not accept a json file as the body  just send a dataForm   const data    new FormData     data append   a   1   data append   b   2    const request   await fetch    echo form       headers         Content-type    application x-www-form-urlencoded         method   POST     body  data       Such as the curl request  curl -v -X POST -H  Content-type  application x-www-form-urlencoded  -d   data txt    echo form

User · Answer

After spending some times  reverse engineering jsFiddle  trying to generate payload - there is an effect   Please take eye  care  on line return response json    where response is not a response - it is promise   var json         json  JSON stringify           a  1          b  2             delay  3     fetch   echo json          method   post       headers             Accept    application json  text plain                 Content-Type    application json             body   json     encodeURIComponent JSON stringify json json       amp delay     json delay     then function  response        return response json        then function  result        alert result       catch  function  error        console log  Request failed   error         jsFiddle  http   jsfiddle net egxt6cpz 46   amp  amp  Firefox   39  amp  amp  Chrome   42

[javascript] Fetch: POST json data

Examples related to javascript

Examples related to json

Examples related to fetch-api