Axios Http client - How to construct Http Post url with form params

Question

I am trying to create a postHTTP request with some form parameters that are to be set. I am using the axios with node server. I already have a java code implementation of constructing a url as given below:

JAVA CODE:

HttpPost post = new HttpPost(UriBuilder.fromUri (getProperty("authServerUrl"))
            .path(TOKEN_ACCESS_PATH).build(getProperty("realm")));

List<NameValuePair> formParams = new ArrayList<NameValuePair>();

formParams.add(new NameValuePair("username",getProperty ("username")));
formParams.add(new NameValuePair("password",getProperty ("password")));
formParams.add(new NameValuePair("client_id, "user-client"));

I am trying to do the same thing in axios.

AXIOS IMPLEMENTATION:

axios.post(authServerUrl +token_access_path,
        {
                username: 'abcd', //gave the values directly for testing
                password: '1235!',
                client_id: 'user-client'
        }).then(function(response) {
            console.log(response); //no output rendered
        }

Is the approach to set these form params on the post request correct?

Satyam Saurabh · Accepted Answer · 2023-09-13 10:52:03Z

170

You have to do the following:

var querystring = require('querystring');
//...
axios.post(authServerUrl + token_access_path,
    querystring.stringify({
            username: 'abcd', //gave the values directly for testing
            password: '1235!',
            client_id: 'user-client'
    }), {
      headers: { 
        "Content-Type": "application/x-www-form-urlencoded"
      }
    }).then(function(response) {
        console.log(response);
    });

Update: If you are using es6, change the import to import qs from 'qs';

edited Sep 13, 2023 at 10:52

Satyam Saurabh

6782 gold badges8 silver badges21 bronze badges

answered Aug 1, 2015 at 3:49

cperez

1,7321 gold badge11 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ThomasReggi Over a year ago

This helped me greatly, so simple querystring.stringify the json you want to send if your using application/x-www-form-urlencoded.

Ahmed Wahba Over a year ago

for es6 use import qs from 'qs'; to stringify your object

Melroy van den Berg Over a year ago

querystring is deprecated?

Hammad ul Hasan Over a year ago

Its deprecated please update this

Phil · Accepted Answer · 2021-04-14 07:31:53Z

76

If your target runtime supports it, Axios is able to accept a URLSearchParams instance which will also set the appropriate Content-type header to application/x-www-form-urlencoded

axios.post(authServerUrl + token_access_path, new URLSearchParams({
  username: 'abcd', //gave the values directly for testing
  password: '1235!',
  client_id: 'user-client'
}))

The same goes for the fetch API

fetch(url, {
  method: "POST",
  body: new URLSearchParams({
    your: "object",
    props: "go here"
  })
})

answered Apr 14, 2021 at 7:31

Phil

166k25 gold badges265 silver badges269 bronze badges

Comments

Blacklight · Accepted Answer · 2021-02-26 14:40:18Z

41

Why pull in another library or module to do something so simple with pure vanilla JavaScript? It's really one line of JS to produce the desired data to submit in your POST request.

// es6 example

const params = {
  format: 'json',
  option: 'value'
};

const data = Object.keys(params)
  .map((key) => `${key}=${encodeURIComponent(params[key])}`)
  .join('&');

console.log(data);
// => format=json&option=value

const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data,
  url: 'https://whatever.com/api',
};

const response = await axios(options);  // wrap in async function
console.log(response);

edited Feb 26, 2021 at 14:40

Blacklight

3,8473 gold badges35 silver badges41 bronze badges

answered Apr 17, 2019 at 4:01

jhickok

9999 silver badges12 bronze badges

4 Comments

Giovane Over a year ago

The is one step missing in your solution, encode the values. Replace de ${val} for ${encodeURIComponent(val)}

jhickok Over a year ago

Thanks for the addition Giovane. I updated the code.

Tyler Collier Over a year ago

@Michael Cole why did you remove the square brackets destructure in your edit? They are necessary. The answer by Nick Hanshaw was presumably posted because of your change.

Blacklight Over a year ago

Indeed this edit was incorrect and not working. Edited according to Nick's working answer (probably this one was working before the false edit)

Nick Hanshaw · Accepted Answer · 2021-02-20 17:05:28Z

11

I agree with jhickok, no need to pull in an additional library however their code will not produce a correct result due to the usage of Object.entries, you would expect to see the following:

"format,json=0&option,value=1"

Instead Object.keys should be used.

const obj = {
  format: 'json',
  option: 'value'
};

const data = Object.keys(obj)
  .map((key, index) => `${key}=${encodeURIComponent(obj[key])}`)
  .join('&');
  
console.log(data); // format=json&option=value

Then of course...

const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data,
  url: 'https://whatever.com/api',
};

const response = await axios(options);

answered Feb 20, 2021 at 17:05

Nick Hanshaw

3964 silver badges8 bronze badges

Comments

Abduqodir Gofurboyev · Accepted Answer · 2022-12-14 06:42:43Z

3

const body = new URLSearchParams();
body.append('param1', 'param1_value');
...
...
axios.post(url,body)

answered Dec 14, 2022 at 6:42

Abduqodir Gofurboyev

513 bronze badges

Collectives™ on Stack Overflow

Axios Http client - How to construct Http Post url with form params

5 Answers 5

4 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related