Необходимо соединить x-www-form-urlencoded полезную нагрузку сами, как это:

var details = {
    'userName': 'test@gmail.com',
    'password': 'Password!',
    'grant_type': 'password'
};

var formBody = [];
for (var property in details) {
  var encodedKey = encodeURIComponent(property);
  var encodedValue = encodeURIComponent(details[property]);
  formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");

fetch('https://example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
  body: formBody
})

Примечание, которые , если Вы использовали fetch в (достаточно современном) браузере, вместо, Реагируют Собственный компонент, Вы могли вместо этого создать URLSearchParams объект и использование, что как тело, начиная с состояния Стандарта Выборки , что, если эти body URLSearchParams объект затем, это должно быть сериализировано как application/x-www-form-urlencoded. Однако Вы не можете выполнить, это Реагирует Собственный компонент, потому что Реагируют, Собственный компонент не реализует URLSearchParams .

Используйте URLSearchParams

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

var data = new URLSearchParams();
data.append('userName', 'test@gmail.com');
data.append('password', 'Password');
data.append('grant_type', 'password');

Еще более более простой:

body: new URLSearchParams({
      'userName': 'test@gmail.com',
      'password': 'Password!',
      'grant_type': 'password'
    }),

Просто сделал это, и UrlSearchParams добился цели, Вот мой код, если он помогает кому-то

import 'url-search-params-polyfill';
const userLogsInOptions = (username, password) => {



// const formData = new FormData();
  const formData = new URLSearchParams();
  formData.append('grant_type', 'password');
  formData.append('client_id', 'entrance-app');
  formData.append('username', username);
  formData.append('password', password);
  return (
    {
      method: 'POST',
      headers: {
        // "Content-Type": "application/json; charset=utf-8",
        "Content-Type": "application/x-www-form-urlencoded",
    },
      body: formData.toString(),
    json: true,
  }
  );
};


const getUserUnlockToken = async (username, password) => {
  const userLoginUri = `${scheme}://${host}/auth/realms/${realm}/protocol/openid-connect/token`;
  const response = await fetch(
    userLoginUri,
    userLogsInOptions(username, password),
  );
  const responseJson = await response.json();
  console.log('acces_token ', responseJson.access_token);
  if (responseJson.error) {
    console.error('error ', responseJson.error);
  }
  console.log('json ', responseJson);
  return responseJson.access_token;
};

Просто Использование

import  qs from "qs";
 let data = {
        'profileId': this.props.screenProps[0],
        'accountId': this.props.screenProps[1],
        'accessToken': this.props.screenProps[2],
        'itemId': this.itemId
    };
    return axios.post(METHOD_WALL_GET, qs.stringify(data))

В исходном примере Вы имеете transformRequest функция, которая преобразовывает объект Сформировать Закодированные данные.

В пересмотренном примере Вы заменили это JSON.stringify, который преобразовывает объект в JSON.

В обоих случаях Вы имеете 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', таким образом, Вы требование , чтобы отправить Форме Закодированные данные в обоих случаях.

Использование Ваше Кодирование Формы функционируют вместо JSON.stringify.

обновление Ре:

В Вашем первом fetch пример, Вы устанавливаете body, чтобы быть значением JSON.

Теперь Вы создали Форму Закодированная версия, но вместо того, чтобы установить body, чтобы быть, что значение, Вы создали новый объект и установили Форму Закодированные данные как свойство того объекта.

не создают тот дополнительный объект. Просто присвойте свое значение body.

При использовании JQuery это работает также..

fetch(url, {
      method: 'POST', 
      body: $.param(data),
      headers:{
        'Content-Type': 'application/x-www-form-urlencoded'
      }
})

var details = {
    'userName': 'test@gmail.com',
    'password': 'Password!',
    'grant_type': 'password'
};

var formBody = [];
for (var property in details) {
  var encodedKey = encodeURIComponent(property);
  var encodedValue = encodeURIComponent(details[property]);
  formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");

fetch('http://identity.azurewebsites.net' + '/token', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: formBody
})

это так полезно для меня и работает без любой ошибки

ссылка: https://gist.github.com/milon87/f391e54e64e32e1626235d4dc4d16dc8

Согласно [1 111] спецификация , с помощью encodeURIComponent не даст Вам соответствующую строку запроса. Это указывает:

const formUrlEncode = str => {
  return str.replace(/[^\d\w]/g, char => {
    return char === " " 
      ? "+" 
      : encodeURIComponent(char);
  })
}

const data = {foo: "bar߃©˙∑  baz", boom: "pow"};

const dataPairs = Object.keys(data).map( key => {
  const val = data[key];
  return (formUrlEncode(key) + "=" + formUrlEncode(val));
}).join("&");

// dataPairs is "foo=bar%C3%9F%C6%92%C2%A9%CB%99%E2%88%91++baz&boom=pow"

*/ import this statement */
import qs from 'querystring'

fetch("*your url*", {
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
            body: qs.stringify({ 
                username: "akshita",
                password: "123456",
            })
    }).then((response) => response.json())
      .then((responseData) => {
         alert(JSON.stringify(responseData))
    })

После использования npm i querystring - сохраняют , это, хорошо работают.