axios: In Postman it works, but through axios it throws "unsupported_grant_type"

Summary

I am using WEB API Server to get the access token,

Below is my postman call preview. URL: http://localhost:2002/token Header: [{“key”:“Content-Type”,“value”:“application/x-www-form-urlencoded”,“description”:“”,“enabled”:true}]

In Postman it works perfectly, but through axios it shows “unsupported_grant_type”

Preview

Axios sample function:

function HeaderPostAction(){
  // Send a POST request
  axios({
    method: 'post',
    url: 'http://localhost:2002/token',
    data: {
      "username": "admin",
      "password": "admin123",
      "grant_type": "password"
    },
    headers: { 
      "Content-Type": "application/x-www-form-urlencoded",
      "Cache-Control": "no-cache",
      "Postman-Token": "42e6c291-9a09-c29f-f28f-11872e2490a5"
    }
  }).then(function (response) {
    console.log("Heade With Authentication :" + response);
  })
  .catch(function (error) {
    console.log("Post Error : " +error);
  });
}

Chrome Browser Developer message

Error Response

Please help me to resolve the issue, or what went wrong.

Axios Environment

axios version: v0.17.1
Environment: chrome 62, windows 7

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 17

Most upvoted comments

Hi Guys, Found what is the issue, axois by default it does not converts data to query string, but Jquery by default it converts to query string. Hence I just changed my previous function with $.parse(data), and it worked.

Working code

function HeaderPostAction(){
  // Send a POST request
    var reqData = {
        "username": "admin",
        "password": "admin123",
        "grant_type": "password"
    };
    //var reqData = "username=ganesh&password=123456&grant_type=password";
    axios({
        method: 'post',
        url: 'http://localhost:49359/token',
        withCredentials: true,
        crossdomain: true,
        data: $.param (reqData),    
    headers: { 
      "Content-Type": "application/x-www-form-urlencoded",
      "Cache-Control": "no-cache",
      "Postman-Token": "42e6c291-9a09-c29f-f28f-11872e2490a5"
    }
  }).then(function (response) {
    console.log("Heade With Authentication :" + response);
  })
  .catch(function (error) {
    console.log("Post Error : " +error);
  }); 
}

+43

fireloudapp on Jan 12, 2018

@mahesh-vidhate $.param() is a jQuery function.

You can use this instead:

Object.keys(reqData).map(function(key) {
    return encodeURIComponent(key) + '=' + encodeURIComponent(reqData[key])
}).join('&')

That being said, I’m still in the middle of figuring out how to fix the whole issue in my project. I’ll update if I find an answer. (if I don’t, assume it was something trivial like a wrong variable or something…)

+10

paddykontschak on Jun 22, 2018

Wrt https://github.com/axios/axios/issues/1281#issuecomment-357255541 I was having the same issue. I had done all the withCredentials and cors on server changes suggested by all other post. However the one thing missing in the mix was {crossdomain : true }. To help anyone coming here with axios issue let me summerize

Axios - axios({withCredentials : true, crossdomain : true, … other options … })
Server (in case running on express) – app.use(cors({credentials : true, origin : [‘your domain where axios is running’]}))

pravin-d on Aug 22, 2018

Wrt #1281 (comment) I was having the same issue. I had done all the withCredentials and cors on server changes suggested by all other post. However the one thing missing in the mix was {crossdomain : true }. To help anyone coming here with axios issue let me summerize

Axios - axios({withCredentials : true, crossdomain : true, … other options … })

Server (in case running on express) – app.use(cors({credentials : true, origin : [‘your domain where axios is running’]}))

I finnaly got mine working. Thanks a ton

titomitto on Apr 1, 2019

If you don’t want to use jQuery you can write a simple query function to do the same thing.

var reqData = {
    "username": "admin",
    "password": "admin123",
    "grant_type": "password"
};
let esc = encodeURIComponent;
let query = Object.keys(payload).map(k => esc(k) + "=" + esc(payload[k])).join("&");
axios({
    ...
   data: query,

Greg-Johns on Oct 30, 2019