Для загрузки Закодированных Формой запросов POST я рекомендую использовать объект FormData.
Пример кода:
var params = {
userName: 'test@gmail.com',
password: 'Password!',
grant_type: 'password'
};
var formData = new FormData();
for (var k in params) {
formData.append(k, params[k]);
}
var request = {
method: 'POST',
headers: headers,
body: formData
};
fetch(url, request);
Необходимо соединить 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
не даст Вам соответствующую строку запроса. Это указывает:
- Имен элементов управления и значений оставляют. Пробелы заменяются
+
, и затем зарезервированных символов оставляют, как описано в [RFC1738], разделяют 2.2: неалфавитно-цифровые символы заменяются%HH
, знак процента и две шестнадцатеричных цифры, представляющие код ASCII символа. Разрывы строки представлены как пары "CR LF" (т.е.%0D%0A
).- имена/значения управления перечислены в порядке, они появляются в документе. Имя разделяется от значения
=
, и пары имя/значение разделяются друг от друга&
.
проблема, encodeURIComponent
кодирует пробелы, чтобы быть %20
, не +
.
тело формы должно быть кодировано с помощью изменения эти 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 - сохраняют , это, хорошо работают.