Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Axios post method requesting with x-www-form-urlencoded content type
const axios = require('axios')
const qs = require('querystring')
...
const requestBody = {
name: 'Akexorcist',
age: '28',
position: 'Android Developer',
description: 'birthdate=25-12-1989&favourite=coding%20coding%20and%20coding&company=Nextzy%20Technologies&website=http://www.akexorcist.com/',
awesome: true
}
const config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
axios.post(url, qs.stringify(requestBody), config)
.then((result) => {
// Do somthing
})
.catch((err) => {
// Do somthing
})
@jimmy18dev

This comment has been minimized.

Copy link

@jimmy18dev jimmy18dev commented Oct 9, 2018

Thank You!

@ymqy

This comment has been minimized.

Copy link

@ymqy ymqy commented Nov 8, 2018

How do i input when i use postman?

@ndrshn

This comment has been minimized.

Copy link

@ndrshn ndrshn commented Nov 13, 2018

How do i input when i use postman?

if i'm not wrong,
you should select "x-www-form-urlencoded" option in body tab under the url and type keys and values

@cl0ckwork

This comment has been minimized.

Copy link

@cl0ckwork cl0ckwork commented Jan 3, 2019

you must serialize the query params:
see answer here

// using qs npm module
axios.post(url, qs.stringify(requestBody), config)
  .then((result) => {
    // Do somthing
  })
  .catch((err) => {
    // Do somthing
  })
@VinayakBagaria

This comment has been minimized.

Copy link

@VinayakBagaria VinayakBagaria commented Apr 2, 2019

Instead of using qs module, you can also use:
transformRequest: jsonData => transformRequest(jsonData) in axios' options

const transformRequest = (jsonData = {}) =>
  Object.entries(jsonData)
    .map(x => `${encodeURIComponent(x[0])}=${encodeURIComponent(x[1])}`)
    .join('&');

This works naturally without any extra dependencies.

@brunodrugowick

This comment has been minimized.

Copy link

@brunodrugowick brunodrugowick commented Jun 21, 2019

You should use URLSearchParams() with application/x-www-form-urlencoded according to axios documentation (https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format).

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
@davidhernandeze

This comment has been minimized.

Copy link

@davidhernandeze davidhernandeze commented Jul 23, 2019

clean example!

@funder7

This comment has been minimized.

Copy link

@funder7 funder7 commented Jul 29, 2019

Isn't better to use a JSON request instead? (by adapting the receiving controller)
In fact by looking at the code, you're not sending a form, but a JSON object. Even if that's a test, it already says that JSON its more reliable...

It just looks more readable to me, also with less encoding issues. is this true?

@brunodrugowick

This comment has been minimized.

Copy link

@brunodrugowick brunodrugowick commented Jul 29, 2019

Isn't better to use a JSON request instead? (by adapting the receiving controller)
In fact by looking at the code, you're not sending a form, but a JSON object. Even if that's a test, it already says that JSON its more reliable...

It just looks more readable to me, also with less encoding issues. is this true?

I see many reasons why you should know how to do a request using url-encoded parameters. Aside from the technical reasons, mine is simple: I didn't have control over the API, I needed this code to use a service from Amazon, if I remember well.

@christianspeegle

This comment has been minimized.

Copy link

@christianspeegle christianspeegle commented Jul 30, 2019

Isn't better to use a JSON request instead? (by adapting the receiving controller)
In fact by looking at the code, you're not sending a form, but a JSON object. Even if that's a test, it already says that JSON its more reliable...
It just looks more readable to me, also with less encoding issues. is this true?

I see many reasons why you should know how to do a request using url-encoded parameters. Aside from the technical reasons, mine is simple: I didn't have control over the API, I needed this code to use a service from Amazon, if I remember well.

Depending on the backend, it may be simpler and/or less work to work with url-encoded parameters. One app I develop is .NET Core on the back and Vue.js on the front. The login form sends its data similarly to this example. The login controller grabs the username and password using the [FromForm] attribute, which passes them into the route handler as regular arguments. If the data is sent as JSON, it needs to be parsed and converted to an object or dictionary before the form values can be accessed.

@funder7

This comment has been minimized.

Copy link

@funder7 funder7 commented Aug 5, 2019

I see many reasons why you should know how to do a request using url-encoded parameters. Aside from the technical reasons, mine is simple: I didn't have control over the API, I needed this code to use a service from Amazon, if I remember well.

I was just asking because my previous frontend app was sending by default the data as application/x-www-form-urlencoded, now I'm starting to implement a new part in Vue.js (with Axios), and if you just use the get or post methods, without sending headers, by default it will send a request as application/json.
That's why the question formed in my mind. I was trying to figure if json requests are going to replace url-encoded ones. You know, there's a lot of "movement" into this field, and I'd like to keep up with the latest good practices. In fact I'm rewriting an application, and if I can write good code now, I'll be happier in the future if I will not touch the code :-)

@christianspeegle my backend is in php at the moment, and it didn't work after the switch to the json request.... I will figure out tomorrow what needs to be changed. You know what? By looking at the request headers into Firefox, they both look pretty similar, except the fact that the Json request is encapsulated into { } as a whole object, while the form-urlencoded is shown just as a list of parameters. I think that I will give a look to the raw form-urlencoded request to do a comparison, my suspect is that the raw differs way more than just the two curly braces. But if you already have an idea, please tell me :)

@brunodrugowick

This comment has been minimized.

Copy link

@brunodrugowick brunodrugowick commented Aug 7, 2019

I was just asking because my previous frontend app was sending by default the data as application/x-www-form-urlencoded, now I'm starting to implement a new part in Vue.js (with Axios), and if you just use the get or post methods, without sending headers, by default it will send a request as application/json.
That's why the question formed in my mind. I was trying to figure if json requests are going to replace url-encoded ones. You know, there's a lot of "movement" into this field, and I'd like to keep up with the latest good practices. In fact I'm rewriting an application, and if I can write good code now, I'll be happier in the future if I will not touch the code :-)

Great discussion. I'm not sure about one replacing the other, I didn't go as far as reading HTTP specifications. I'd say:

  • x-www-form-urlencoded if you need to send only a few parameters;
  • json for complex objects.

Although more complex, in a framework like NodeJS using a library such as express, it's quite easy to work with json data.

Also, take a look here and here.

@funder7

This comment has been minimized.

Copy link

@funder7 funder7 commented Aug 7, 2019

I see many reasons why you should know how to do a request using url-encoded parameters. Aside from the technical reasons, mine is simple: I didn't have control over the API, I needed this code to use a service from Amazon, if I remember well.

I was just asking because my previous frontend app was sending by default the data as application/x-www-form-urlencoded, now I'm starting to implement a new part in Vue.js (with Axios), and if you just use the get or post methods, without sending headers, by default it will send a request as application/json.
That's why the question formed in my mind. I was trying to figure if json requests are going to replace url-encoded ones. You know, there's a lot of "movement" into this field, and I'd like to keep up with the latest good practices. In fact I'm rewriting an application, and if I can write good code now, I'll be happier in the future if I will not touch the code :-)

@christianspeegle my backend is in php at the moment, and it didn't work after the switch to the json request.... I will figure out tomorrow what needs to be changed. You know what? By looking at the request headers into Firefox, they both look pretty similar, except the fact that the Json request is encapsulated into { } as a whole object, while the form-urlencoded is shown just as a list of parameters. I think that I will give a look to the raw form-urlencoded request to do a comparison, my suspect is that the raw differs way more than just the two curly braces. But if you already have an idea, please tell me :)

@brunodrugowick

This comment has been minimized.

Copy link

@brunodrugowick brunodrugowick commented Aug 8, 2019

Uhh, I thought about another example where url-parameters are preferable: pagination.

@funder7

This comment has been minimized.

Copy link

@funder7 funder7 commented Aug 8, 2019

Hi @brunodrugowick, wouldn't that probably require a GET request?

@brunodrugowick

This comment has been minimized.

Copy link

@brunodrugowick brunodrugowick commented Aug 9, 2019

It's a GET request. Don't know if I understand the question.

Anyway, here's a NodeJS example code handling the request: https://github.com/brunodrugowick/at-the-tsbyss-leaderboard/blob/44584c59d350b3d66dde4a99a52209543d0432f6/src/controllers/ScoreController.js#L6

@akexorcist

This comment has been minimized.

Copy link
Owner Author

@akexorcist akexorcist commented Aug 14, 2019

Add querystring to convert the request body
Thanks, @cl0ckwork

@realtebo

This comment has been minimized.

Copy link

@realtebo realtebo commented Oct 16, 2019

@brunodrugowick thank your for suggestion to use URLSearchParams.

@abbostajimov

This comment has been minimized.

Copy link

@abbostajimov abbostajimov commented Nov 12, 2019

Thank you)

@BenAzlay

This comment has been minimized.

Copy link

@BenAzlay BenAzlay commented Nov 27, 2019

You saved my life. Thanks so much!

@auvansang

This comment has been minimized.

Copy link

@auvansang auvansang commented Nov 28, 2019

You should use URLSearchParams() with application/x-www-form-urlencoded according to axios documentation (https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format).

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

You save my life

@RyanPWalker

This comment has been minimized.

Copy link

@RyanPWalker RyanPWalker commented Jan 6, 2020

Worked like a charm

@cheezeburger

This comment has been minimized.

Copy link

@cheezeburger cheezeburger commented Jan 8, 2020

OMG, thanks for this!

@douglasnaphas

This comment has been minimized.

Copy link

@douglasnaphas douglasnaphas commented Jan 15, 2020

Thanks! I didn't realize that axios was not magically converting my POST body to an application/x-www-form-urlencoded format, nor did I know of querystring as a commonly accepted way to do this.

@NathanH81

This comment has been minimized.

Copy link

@NathanH81 NathanH81 commented Mar 31, 2020

Thank you!

@jasperpg

This comment has been minimized.

Copy link

@jasperpg jasperpg commented Apr 15, 2020

does this solution (URLSearchParams) work in IE?

@douglasnaphas

This comment has been minimized.

Copy link

@douglasnaphas douglasnaphas commented Apr 15, 2020

does this solution (URLSearchParams) work in IE?

@jasperpg The Browser compatibility table at the bottom of the MDN page on URLSearchParams says it is not available in IE.

The axios page linked in the earlier comment on URLSearchParams says that to address this browser compatibility issue, you can use the polyfill that it links or the qs package.

@oriuken

This comment has been minimized.

Copy link

@oriuken oriuken commented Apr 16, 2020

Many Thanks !!!

@Anixed

This comment has been minimized.

Copy link

@Anixed Anixed commented May 21, 2020

thanks bro!

@CRiquelme

This comment has been minimized.

Copy link

@CRiquelme CRiquelme commented Jun 7, 2020

You should use URLSearchParams() with application/x-www-form-urlencoded according to axios documentation (https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format).

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

Thank you!!! you save my life, thanks!!!

@lucasmori1

This comment has been minimized.

Copy link

@lucasmori1 lucasmori1 commented Jun 17, 2020

Thank you !!

@gamertense

This comment has been minimized.

Copy link

@gamertense gamertense commented Jul 4, 2020

You should use URLSearchParams() with application/x-www-form-urlencoded according to axios documentation (https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format).

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

This works like a charm! (in React Native 0.62.2)
Thank you so much!

@imechemi

This comment has been minimized.

Copy link

@imechemi imechemi commented Jul 8, 2020

Thanks

@mohammad141

This comment has been minimized.

Copy link

@mohammad141 mohammad141 commented Aug 26, 2020

thanks

@rene3dm

This comment has been minimized.

Copy link

@rene3dm rene3dm commented Sep 8, 2020

Thank you, save my life ahuhauahuahauauh
Thanks

@manuel-quijano

This comment has been minimized.

Copy link

@manuel-quijano manuel-quijano commented Sep 21, 2020

💯 hours of looking for a solution! You rock

@sinanmb

This comment has been minimized.

Copy link

@sinanmb sinanmb commented Sep 25, 2020

Thank you!

@chinchaun

This comment has been minimized.

Copy link

@chinchaun chinchaun commented Oct 14, 2020

thanks

@ICEYSELF

This comment has been minimized.

Copy link

@ICEYSELF ICEYSELF commented Oct 20, 2020

Thank you for a lot!

@thisaurel

This comment has been minimized.

Copy link

@thisaurel thisaurel commented Oct 31, 2020

Thanks !

@moiznet

This comment has been minimized.

Copy link

@moiznet moiznet commented Nov 15, 2020

thanks a lot.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.