How to add data to POST request using Axios?

Question

I am trying to make a POST request but am getting the following message in my chrome network tab:

{error: "unsupported_grant_type",…} error: "unsupported_grant_type" error_description: "grant_type must be client_credentials, authorization_code or refresh_token"

I have been using Axios for RESTful calls and this is the POST request:

async componentDidMount() {
    const encodedString = 'blah'//some encoded string
    const [initSpotResponse] = await Promise.all([
        axios.post('https://accounts.spotify.com/api/token',
            { data: { grant_type: 'client_credentials' } },
            {
                headers: {
                    'Authorization': `Basic ${encodedString}`,
                    'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
                }
            }
        )
    ]);
}

I've tried all sorts of things mentioned in other StackOverflow posts but nothing has seemed to work. Does anyone have any experience creating such a POST request? I haven't seen an axios-specific post about this issue - should I abandon axios (what should I switch to if so)?

You could try fetch, but it seems like something is wrong with your authentication. Is client_credentials supposed to be a string or did you mean to pass a variable? — cullanrocks, May 24 '19 at 16:02
@cullanrocks client_credentials is supposed to be a string, yeah — Isaac Perez, May 24 '19 at 16:08

Matteo Basso · Answer 1 · 2019-05-24T16:17:48.860

-1

axios.post accepts as second parameter the data object (axios.post(url[, data[, config]])), serialize data with qs and try this, as stated here:

const qs = require('querystring');


async componentDidMount() {
    const encodedString = 'blah'//some encoded string
    const [initSpotResponse] = await Promise.all([
        axios.post('https://accounts.spotify.com/api/token',
            qs.stringify({ grant_type: 'client_credentials' }),
            {
                headers: {
                    'Authorization': `Basic ${encodedString}`,
                    'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
                }
            }
        )
    ]);
}

edited May 24 '19 at 16:17

answered May 24 '19 at 16:02

Matteo Basso

2,424
2
11
21

I've not seen the application/x-www-form-urlencoded before. Just updated the answer – Matteo Basso May 24 '19 at 16:18
here https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data – Junius L. May 24 '19 at 16:48
there's no need for `const qs = require('querystring');` – Junius L. May 25 '19 at 18:23

How to add data to POST request using Axios?

1 Answers1