Отправка почтового запроса от axios с помощью «Content-Type»: «application / x-www-form-urlencoded» дает 401 несанкционированный ответ

Question

Я отправляю POST запрос на сервер для получения токена через axios с заголовком Content-Type x-www-form-urlencoded.Я попробовал то же самое с почтальоном, и он отлично работает.Я отправляю пару значений ключа grant_type и client_credentials в теле запроса.

Это мой запрос axios:

axios.post(`${baseURI}/protocol/openid-connect/token`, data, {
  headers : {
    "Authorization" : "Basic " + token,
    "Content-Type" : "application/x-www-form-urlencoded"
  },
  withCredentials: true
}).then(response => {
  AUTH_TOKEN = response.data.access_token;
  console.log(response.data);
}).catch(error => {
  console.log(error.response);
})

Объект данных состоит из client_credentials. Те же учетные данные даютуспешный ответ в почтальоне.

Answer 1

У меня была точно такая же проблема, пока я наконец не понял, что Axios нужно переформатировать объект данных в виде строки запроса.

Так что сделайте себе такую ​​функцию:

function getQueryString(data = {}) {
  return Object.entries(data)
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
    .join('&');
}

Довольно просто, просто URI, кодирующий все части вашего объекта и соединяющий их с помощью &.

Затем измените ваш код следующим образом:

axios.post(`${baseURI}/protocol/openid-connect/token`,data, {
  headers : {
    "Authorization" : "Basic " + token,
    "Content-Type" : "application/x-www-form-urlencoded"
  },
  withCredentials: true,
  transformRequest: getQueryString
})
.then(/*...*/);

Вы можете прочитать о различных параметрах, включая transformRequest, для конфигурации запроса здесь: https://github.com/axios/axios#request-config

(Я все еще раздражен тем, что это было необходимо, и не только Axios, но и хорошо.)