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

by

You have to put together the x-www-form-urlencoded payload yourself, like this:

var details = {
    'userName': '[email protected]',
    '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("&");

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.

More Related Contents:

  1. Fetch: POST JSON data
  2. Trying to use fetch and pass in mode: no-cors
  3. Handle response – SyntaxError: Unexpected end of input when using mode: ‘no-cors’
  4. Prevent double submission of forms in jQuery
  5. Error when accessing API with fetch while setting mode to ‘no-cors’ [duplicate]
  6. How can I download a file using window.fetch?
  7. React Native fetch() Network Request Failed
  8. How do I post form data with fetch api?
  9. Internal API fetch with getServerSideProps? (Next.js)
  10. What is difference between Axios and Fetch?
  11. fetch resolves even if 404?
  12. fetch(), how do you make a non-cached request?
  13. JavaScript, make a POST with JSON data with fetch()
  14. POST Request with Fetch API?
  15. fetch() unexpected end of input
  16. React useEffect causing: Can’t perform a React state update on an unmounted component
  17. Chrome – Fetch API cannot load file. How to workaround?
  18. Cannot load Deezer API resources from localhost with the Fetch API
  19. Relative paths with fetch in Javascript
  20. Hide 401 console.error in chrome dev tools getting 401 on fetch() call [duplicate]
  21. Empty body in fetch POST request
  22. how to process fetch response from an ‘opaque’ type?
  23. fetch retry request (on failure)
  24. UseEffect being called multiple times
  25. fetch API returning an empty string
  26. How to get the filename from a file downloaded using Javascript Fetch API?
  27. How to post image with fetch?
  28. React-native upload image to amazons s3
  29. FastAPI returns “Error 422: Unprocessable entity” when I send multipart form data with JavaScript Fetch API
  30. Cannot Upload File to FastAPI backend using JavaScript Fetch API in the frontend

Leave a Comment