Axios: Send variable in the body of a POST request and not params

Question

I am working on a project where i need to send authentication variables in the body of the request and not as parameters. I see that a POST request sends the second parameter as the body in the documentation but I am getting an error in the .NET service.

_response: "{"error":"invalid_clientId","error_description":"ClientId should be sent."}"

I was getting the same error in PHP when I wasn't send the params in the body but the values are all the same that I am using in this POST request so I know the params and values are correct.

Here is what I have:

axios.post(`https://myawesomeapi.com`, 
{username:this.state.email_address, password:this.state.password, grant_type:'password', client_id:'thisAppsClientID'}, 
{headers: { 'content-type':'application/x-www-form-urlencoded', 'accept':'application/json' }}
).then( res => {
  let result = res.data;
  console.log(result);
})
.catch( (e) => {  console.log(e.response); });

When I console.log and inspect the error response I see this:

config:
   adapter: ƒ xhrAdapter(config)
   data: "{"username":"myusername","password":"mypassword!","grant_type":"password","client_id":"thisAppsClientID"}"
   headers: {Accept: "application/json, text/plain, */*", Content-Type: "application/x-www-form-urlencoded"}
...

Here is what I have in guzzle that is working if that helps:

    $this->client->request('post', 'https://myawesomeapi.com',
['form_params' => ['username' => $input['username'], 'password' => $input['password'], 'client_id'=>'thisAppsClientID', 'grant_type'=>'password']],
['headers' => ['accept' => 'application/json','Content-Type' => 'application/x-www-form-urlencoded']]);

Is the username, password, grant_type, and client_id being passed as the body? Did I mess up how to send the headers? Thanks and let me know!

Answer 1

I know I had similar problems with axios that I never quite figured out. However, I was able to get post requests to work with Form Data . Try the snippet below. I hope it works.

const dataForm = new FormData();
dataForm.append('username', this.state.email_address);
dataForm.append('password', this.state.password);
dataForm.append('grant_type', 'password');
dataForm.append('client_id', 'thisAppsClientID');

axios.post('https://myawesomeapi.com', dataForm)
.then(res => {
  let result = res.data;
  console.log(result);
})
.catch(e => { 
  console.log(e.response); 
});