Axios package's POST request is unable to post the data sent as JSON or form data to a REST end point

Question

I am replacing the deprecated 'request' package of npm with 'axios' latest in Node 16.15.x application.

However, I am facing an issue with one POST request sent via axios (other POST requests I was able to implement)

Here is code using 'request' package POST

request.post('https://sampleserver6.arcgisonline.com/arcgis/tokens/generateToken', {
    form: {
        'username': 'user1',
        'password': 'user1',
        'client': 'requestip',
        'expiration': 60,
        'f': 'json',
    }
}, (err, response, body) => {
    console.log('****Token', body)
})

This gives the expected response. Which is a token. I am using a sample REST server "https://sampleserver6.arcgisonline.com/arcgis/tokens/generateToken"

Now when trying the same POST request using 'axios' POST,

axios.post('https://sampleserver6.arcgisonline.com/arcgis/tokens/generateToken', {
        'username': 'user1',
        'password': 'user1',
        'client': 'requestip',
        'expiration': 60,
        'f': 'json',
    }, {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    })
    .then(function(response) {
        console.log('****Token', body)
    })

The response is 200 however the response data shows an error as "Invalid request Usage: https://sampleserver6.arcgisonline.com/arcgis/tokens?request=gettoken&username=username&password=password&"

This is the same error on the sample REST server as well when you put no values/partial values in the form and click 'Generate Token'. So it seems 'axios' is not able to put form data as expected.

Am I using the correct implementation in 'axios' POST?

I have tried using the 'form-data' package as well -> same error

I have tried different Content-Type -> Issue persists

You can find the answer [here](https://stackoverflow.com/questions/47630163/axios-post-request-to-send-form-data) on the usage of Form data with Axios — Rajesh Reddy, Aug 05 '22 at 12:55

score 1 · Answer 1 · edited Aug 10 '22 at 17:30

1

Using URLSearchParams instead of FormData worked for me.

const param = new URLSearchParams({
  'username': 'user1',
  'password': 'user1',
  'client': 'requestip',
  'expiration': 60,
  'f': 'json',
});

axios({
  method: 'post',
  url: 'https://sampleserver6.arcgisonline.com/arcgis/tokens/generateToken',
  data: param.toString()
});

P.S: Did not have to pass any headers.

edited Aug 10 '22 at 17:30

Tyler2P

2,324
26
22
31

answered Aug 08 '22 at 08:28

Mayur Shinde

45
7

score -1 · Answer 2 · answered Mar 24 '23 at 08:18

Your Content-Type value is wrong. you are sending a JS object so the content type should be application/json; however, I will advise that you let the library determine that value. You can always inspect the request with your navigator dev tools to verify the content type value. Nevertheless, this should work:

axios
  .post('https://sampleserver6.arcgisonline.com/arcgis/tokens/generateToken', {
        username: 'user1',
        password: 'user1',
        client: 'requestip',
        expiration: 60,
        f: 'json',
    })
    .then(({data}) {
        console.log('****Token', data)
    })

or

const form = new FormData() //generally used to upload files
form.append('username', 'user1');
form.append('password', 'user1');
form.append('client', 'requestip');
form.append('expiration', 60);
form.append('f', 'json');

axios
  .post('https://sampleserver6.arcgisonline.com/arcgis/tokens/generateToken', form)
    .then(({data}) {
        console.log('****Token', data)
    })

Axios package's POST request is unable to post the data sent as JSON or form data to a REST end point

2 Answers2