Response 400 for Fetch API call

Question

I am trying to make a call using JavaScript's Fetch API to generate an OAuth Token but I keep receiving a 400 response code and I'm not sure why. I wrote the key and secret to the console to verify their values, and I made the same API call using cURL (with the response I expected). Is there a small issue in my syntax?

    fetch('https://api.petfinder.com/v2/oauth2/token', {
        method: 'POST',
        body: 'grant_type=client_credentials&client_id=' + key + '&client_secret=' + secret
    }).then(r => { response = r.json() });

Answer 1

If the request body is a string, the Content-Type header is set to text/plain;charset=UTF-8 by default. Since you're sending urlencoded data, you have to set the Content-Type header to application/x-www-form-urlencoded .

fetch('https://api.petfinder.com/v2/oauth2/token', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: 'grant_type=client_credentials&client_id=' + key + '&client_secret=' + secret
})

---

As I mentioned in a comment, you shouldn't make the above request from a browser since it exposes the client secret.

Answer 2

Thanks to @Arun's recommendation of adding Content-Type, I am getting the right response now.

Also, for any other JavaScript newbies playing around with the petfinder API, this is the chain that I used to extract the token from the response:

    fetch('https://api.petfinder.com/v2/oauth2/token', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'grant_type=client_credentials&client_id=' + key + '&client_secret=' + secret
    }).then(response => response.json().then(data => ({
        data: data,
        status: response.status})  
    ).then(function(res) {
        console.log(res.status, res.data.access_token);
    }));