How do I POST a x-www-form-urlencoded request using Fetch

Question

I have some parameters that I want to POST form-encoded to my server          userName    test gmail com        password    Password         grant type    password      I m sending my request  currently without parameters  like this  var obj       method   POST     headers         Content-Type    application x-www-form-urlencoded  charset UTF-8           fetch  https   example com login   obj     then function res           Do stuff with result          How can I include the form-encoded parameters in the request

User · Answer

Use URLSearchParams  https   developer mozilla org en-US docs Web API URLSearchParams  var data   new URLSearchParams    data append  userName    test gmail com    data append  password    Password    data append  grant type    password

User · Answer

Just set the body as the following var reqBody    quot username  quot  username  quot  amp password  quot  password  quot  amp grant type password quot    then fetch  url           method   POST         headers                 Authorization    Bearer token              Content-Type    application x-www-form-urlencoded  charset UTF-8                 body  reqBody      then  response    gt  response json           then  responseData    gt              console log JSON stringify responseData             catch err  gt  console log err

User · Answer

Even simpler  body  new URLSearchParams          userName    test gmail com          password    Password           grant type    password           Docs  https   developer mozilla org en-US docs Web API WindowOrWorkerGlobalScope fetch

User · Answer

According to the spec  using encodeURIComponent won t give you a conforming query string  It states         Control names and values are escaped  Space characters are replaced by    and then reserved characters are escaped as described in  RFC1738   section 2 2  Non-alphanumeric characters are replaced by  HH  a percent sign and two hexadecimal digits representing the ASCII code of the character  Line breaks are represented as  CR LF  pairs  i e    0D 0A     The control names values are listed in the order they appear in the document  The name is separated from the value by   and name value pairs are separated from each other by  amp        The problem is  encodeURIComponent encodes spaces to be  20  not     The form-body should be coded using a variation of the encodeURIComponent methods shown in the other answers   const formUrlEncode   str   gt      return str replace     d w  g  char   gt        return char                               encodeURIComponent char           const data    foo   bar          baz   boom   pow     const dataPairs   Object keys data  map  key   gt      const val   data key     return  formUrlEncode key          formUrlEncode val       join   amp         dataPairs is  foo bar C3 9F C6 92 C2 A9 CB 99 E2 88 91  baz amp boom pow

User · Answer

If you are using JQuery  this works too    fetch url          method   POST          body    param data         headers            Content-Type    application x-www-form-urlencoded

User · Answer

In the original example you have a transformRequest function which converts an object to Form Encoded data   In the revised example you have replaced that with JSON stringify which converts an object to JSON   In both cases you have  Content-Type    application x-www-form-urlencoded  charset UTF-8  so you are claiming to be sending Form Encoded data in both cases   Use your Form Encoding function instead of JSON stringify     Re update   In your first fetch example  you set the body to be the JSON value   Now you have created a Form Encoded version  but instead of setting the body to be that value  you have created a new object and set the Form Encoded data as a property of that object   Don t create that extra object  Just assign your value to body

User · Answer

You can use react-native-easy-app that is easier to send http request and formulate interception request   import   XHttp   from  react-native-easy-app      Synchronous request const params    name  rufeng  age 20  const response   await XHttp   url url  param params  formEncoded   execute  GET    const  success  json  message  status    response      Asynchronous requests XHttp   url url  param params  formEncoded   get  success  json  message  status   gt       if  success          this setState  content  JSON stringify json           else          showToast msg

User · Answer

For uploading Form-Encoded POST requests  I recommend using the FormData object   Example code   var params         userName   test gmail com       password   Password        grant type   password      var formData   new FormData     for  var k in params        formData append k  params k       var request         method   POST       headers  headers      body  formData     fetch url  request

User · Answer

import this statement    import qs from  querystring   fetch   your url                  method   POST               headers    Content-Type    application x-www-form-urlencoded charset UTF-8                body  qs stringify                    username   akshita                   password   123456                         then  response    gt  response json           then  responseData    gt             alert JSON stringify responseData            After using npm i querystring --save it s work fine

User · Answer

You have to put together the x-www-form-urlencoded payload yourself  like this   var details          userName    test gmail com        password    Password         grant type    password      var formBody       for  var property in details      var encodedKey   encodeURIComponent property     var encodedValue   encodeURIComponent details property      formBody push encodedKey         encodedValue     formBody   formBody join   amp      fetch  https   example com login       method   POST     headers         Content-Type    application x-www-form-urlencoded charset UTF-8         body  formBody      Note that if you were using fetch in a  sufficiently modern  browser  instead of React Native  you could instead create a URLSearchParams object and use that as the body  since the Fetch Standard states that if the body is a URLSearchParams object then it should be serialised as application x-www-form-urlencoded  However  you can t do this in React Native because React Native does not implement URLSearchParams

User · Answer

Just did this and UrlSearchParams did the trick Here is my code if it helps someone  import  url-search-params-polyfill   const userLogsInOptions    username  password    gt          const formData   new FormData      const formData   new URLSearchParams      formData append  grant type    password      formData append  client id    entrance-app      formData append  username   username     formData append  password   password     return               method   POST         headers                Content-Type    application json  charset utf-8            Content-Type    application x-www-form-urlencoded                body  formData toString        json  true                const getUserUnlockToken   async  username  password    gt      const userLoginUri      scheme      host  auth realms   realm  protocol openid-connect token     const response   await fetch      userLoginUri      userLogsInOptions username  password          const responseJson   await response json      console log  acces token    responseJson access token     if  responseJson error        console error  error    responseJson error         console log  json    responseJson     return responseJson access token

User · Answer

No need to use jQuery  querystring or manually assemble the payload  URLSearchParams is a way to go and here is one of the most concise answers with the full request example  fetch  https   example com login       method   POST     headers         Content-Type    application x-www-form-urlencoded         body  new URLSearchParams        param    Some value        another param    Another value             then res   gt           Do stuff with the result        Yes  you can use Axios or whatever you want instead of fetch  P S  URLSearchParams is not supported in IE

User · Answer

var details          userName    test gmail com        password    Password         grant type    password      var formBody       for  var property in details      var encodedKey   encodeURIComponent property     var encodedValue   encodeURIComponent details property      formBody push encodedKey         encodedValue     formBody   formBody join   amp      fetch  http   identity azurewebsites net      token       method   POST     headers         Accept    application json        Content-Type    application x-www-form-urlencoded         body  formBody      it is so helpful for me and works without any error  refrence   https   gist github com milon87 f391e54e64e32e1626235d4dc4d16dc8

User · Answer

Just Use   import  qs from  qs    let data              profileId   this props screenProps 0            accountId   this props screenProps 1            accessToken   this props screenProps 2            itemId   this itemId            return axios post METHOD WALL GET  qs stringify data

[javascript] How do I POST a x-www-form-urlencoded request using Fetch?

Examples related to javascript

Examples related to http-post

Examples related to fetch-api