Fetch post request works but axios post does not?

Question

Currently trying to convert a working fetch POST request into an Axios POST request, however, I keep getting the error:

"Error: Request failed with status code 400".

The function is a post request to the Spotify API to obtain an authentication token. Would greatly appreciate any help :)

This is the current Fetch POST request that works:

const result = await fetch('https://accounts.spotify.com/api/token', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    Authorization: 'Basic ' + btoa(this.clientId + ':' + this.clientSecret),
  },
  body: 'grant_type=client_credentials',
});

My current Axios POST request that does not work:

const result = await axios({
  url: 'https://accounts.spotify.com/api/token',
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    Authorization: 'Basic ' + btoa(this.clientId + ':' + this.clientSecret),
  },
  body: 'grant_type=client_credentials',
}).catch((error) => console.log(error));

I've also tried using the axios.post method:

const result = await axios.post('https://accounts.spotify.com/api/token', null, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    Authorization: 'Basic ' + btoa(this.clientId + ':' + this.clientSecret),
  },
  body: 'grant_type=client_credentials',
});

Did you try https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format ? — CBroe, Aug 26 '20 at 09:23
With axios you should use the property `data` instead of `body`. — trincot, Aug 26 '20 at 09:24

score 0 · Answer 1 · answered Aug 26 '20 at 09:32

thanks @trincot, using data instead of body works

const result = await axios({
  url: "https://accounts.spotify.com/api/token",
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
    Authorization: "Basic " + btoa(this.clientId + ":" + this.clientSecret),
  },
  data: "grant_type=client_credentials",
}).catch((error) => console.log(error.response));

Fetch post request works but axios post does not?

1 Answers1

Linked