Отправленный почтовый запрос с данными формы тела с fetch () - PullRequest
Новая
       63

Отправленный почтовый запрос с данными формы тела с fetch ()

0 голосов
/ 23 марта 2020

Я пытаюсь опубликовать против API, он работает, когда я использую Postman и прикрепляю все свои данные как "form-data".

Когда я пытаюсь использовать метод извлечения js, например это 

const data = {
  'client_id': 'lorem ipsum',
  'client_secret': 'lorem ipsum',
  'scope': 'lorem ipsum',
  'grant_type': 'lorem ipsum'
};


fetch(apiUrl, {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
})

или как это: 

const data = new FormData();
data.append('client_id', 'lorem ipsum');
data.append('client_secret', 'lorem ipsum');
data.append('scope', 'lorem ipsum');
data.append('grant_type', 'lorem ipsum');

fetch(apiUrl, {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: data
})

Я получаю ошибку invalid_request, поэтому, очевидно, API ожидает, что данные будут отличаться, кто-нибудь может мне помочь, как передать данные как formData в методе извлечения, как, например, Postman?

Ответы [ 2 ]

1 голос
/ 23 марта 2020

Вышеуказанная ошибка обычно возникает из-за несоответствия типа содержимого между тем, что было предоставлено методом fetch , и тем, которое ожидалось серверным API.

В приведенном выше коде метод fetch отправляет содержимое типа 'aplpication / json'.

Если сервер выдает ошибку для этого формата, можно сделать вывод, что сервер, вероятно, ожидает содержимое в другом формате.

Допустимые поддерживаемые форматы типа содержимого:

  • application / json (Не работает в текущий сценарий)
  • application / x- www-form-urlencoded
  • multipart / form-data
  • text / plain

Следовательно, проблему можно решить, изменив заголовок «content-type» в вызове fetch с 'application / json' на один из этих других поддерживаемых типов.

Пример рабочего вызова выборки: 

const data = new FormData();
data.append('client_id', 'lorem ipsum');
data.append('client_secret', 'lorem ipsum');
data.append('scope', 'lorem ipsum');
data.append('grant_type', 'lorem ipsum');

fetch(apiUrl, {
  method: "POST",

  headers: {
   // "Content-Type": "application/json"    --> option 1 (not working)
   // "Content-Type": "application/x-www-form-urlencoded"   --> option 2
   // "Content-Type": "multipart/form-data"    --> option 3
   // "Content-Type": "text/plain"    --> option 4
  },

  body: data

})

// Option 5:  Try fetch without any header 
fetch(apiUrl, {
  method: "POST",
  body: data
})

Дополнительная информация:

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

0 голосов
/ 23 марта 2020

Вам необходимо добавить тип контента 

'Content-Type': 'application/x-www-form-urlencoded'
...