☰

Fetch を使用して x-www-form-urlencoded リクエストを POST するにはどうすればよいですか? 質問する

tag-icon • tag-icon javascript http-post fetch-api x-www-form-urlencoded
Fetch を使用して x-www-form-urlencoded リクエストを POST するにはどうすればよいですか? 質問する

フォームエンコードされてサーバーに POST 送信したいパラメータがいくつかあります。

{
    'userName': '[email protected]',
    'password': 'Password!',
    'grant_type': 'password'
}

私はリクエストを次のように送信しています（現在はパラメータなし）。

var obj = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  },
};
fetch('https://example.com/login', obj)
  .then(function(res) {
    // Do stuff with result
  });

フォームエンコードされたパラメータをリクエストに含めるにはどうすればよいですか?

ベストアンサー1

次のように、x-www-form-urlencoded ペイロードを自分で組み立てる必要があります。

var details = {
    'userName': '[email protected]',
    '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
})

注意：React Nativeの代わりに（十分に最新の）ブラウザを使用している場合は、代わりにfetchURLSearchParamsオブジェクトをボディとして使用します。フェッチ標準状態bodyがオブジェクトである場合はURLSearchParams、 としてシリアル化する必要がありますapplication/x-www-form-urlencoded。ただし、React Nativeではこれを行うことはできません。React Nativeでは実装しないURLSearchParams。

おすすめ記事