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',
});

With axios you should use the property data instead of body. — trincot

michael michael · Accepted Answer · 2020-08-26T09:32:43

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 Answers