Почему не передаются параметры в POST запросе?

Question

[pcdesign]

Делаю по официальной документации:
https://facebook.github.io/react-native/docs/network

const response = fetch(
     "<PLACE POST REQUEST URL HERE>", {
         method: 'POST',
         headers: {
          Accept: 'application/json',
             'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          key1: 'value1',
          key2: 'value2',
        }),
       }) 
       .then((response) => { return  response.json() } ) 
       .catch((error) => console.warn("fetch error:", error))
       .then((response) => {
console.log(JSON.stringify(response));
})

POST запрос передается, но голый без параметров.
Нагуглил какое-то странное решение. Вот такое:

//POST json 
    var dataToSend = {title: 'foo', body: 'bar', userId: 1};
    //making data to send on server
    var formBody = [];
    for (var key in dataToSend) {
      var encodedKey = encodeURIComponent(key);
      var encodedValue = encodeURIComponent(dataToSend[key]);
      formBody.push(encodedKey + "=" + encodedValue);
    }
    formBody = formBody.join("&");
    //POST request 
    fetch('https://jsonplaceholder.typicode.com/posts', {
      method: "POST",//Request Type 
      body: formBody,//post body 
      headers: {//Header Defination 
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
      },
    })
    .then((response) => response.json())
    //If response is in json then in success
    .then((responseJson) => {
        alert(JSON.stringify(responseJson));
        console.log(responseJson);
    })
    //If response is not in json then in error
    .catch((error) => {
      alert(JSON.stringify(error));
      console.error(error);
    });

Оно работает. POST запрос с параметрами передается.
Почему?
Как правильно?

Answer 1

[Роман Александрович]

выдрал этот кусок из живого проекта

let body = { username: email, password: password, grant_type: "password" }
		const searchParams = Object.keys(body)
			.map(key => {
				return encodeURIComponent(key) + "=" + encodeURIComponent(body[key])
			})
			.join("&")


await fetch(`${API_ROOT}/Token`, {
		method: "POST",
		headers: {
			"Content-Type": "application/x-www-form-urlencoded",
			Platform: Platform.OS,
			buildVersion: VersionNumber.buildVersion,
		},
		body: searchParams,
	}).then((response)=>console.log("response",response))

Comments

[pcdesign]

Спасибо большое!
Если не затруднит объясните, пожалуйста, почему в официальной доке и на SO - куча решений с

body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),

Почему не работает?

[Роман Александрович]

pcdesign, наверно в этом примере подразумевается что вы собираетесь передавать content-type application/json

[pcdesign]

Роман Александрович, я понял, спасибо! В случае с body: JSON.stringify передается POST с json строкой, а не параметры, которые ожидает получить удаленный сервер.

Благодарю вас за помощь. Я каким-то чудом умудрился дотащить свой первый проект на rn до апп стора.
Во многом благодаря вашим ответам.

[Роман Александрович]

pcdesign, продолжайте в том же духе и скоро сможете не только вопросы задавать, но и отвечать на них