it-swarm.com.de

Veröffentlichen Sie eine X-www-form-urlencoded-Anforderung in React Native

Ich habe einige Parameter, die ich POST auf meinem Server formatieren möchte:

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

Ich sende meine Anfrage (derzeit ohne Parameter) so

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
  }); 

Wie kann ich die formcodierten Parameter in die Anfrage aufnehmen?

52
texas697

Sie müssen die x-www-form-urlencoded-Nutzlast wie folgt zusammenstellen:

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
})

Beachten Sie, dass wenn Sie fetch in einem (ausreichend modernen) Browser verwendet haben. Statt React Native können Sie stattdessen ein URLSearchParams -Objekt erstellen und dieses Objekt seit dem Fetch Standardzustände , dass das body-Objekt ein URLSearchParams-Objekt ist und dann als application/x-www-form-urlencoded serialisiert werden soll. In React Native ist dies jedoch nicht möglich, da React Native URLSearchParams nicht implementiert.

152

Verwenden Sie URLSearchParams

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

var data = new URLSearchParams();
data.append('userName', '[email protected]');
data.append('password', 'Password');
data.append('grant_type', 'password');
16
Nicu Criste

Ich habe das einfach gemacht und UrlSearchParams hat den Trick gemacht. Hier ist mein Code, wenn es jemandem hilft

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;
};
5
P-A

Benutz einfach 

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))
2
mojTaba Shayegh

Noch einfacher:

body: new URLSearchParams({
      'userName': '[email protected]',
      'password': 'Password!',
      'grant_type': 'password'
    }),
1
alex_1948511

Wenn Sie JQuery verwenden, funktioniert das auch.

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

Im ursprünglichen Beispiel haben Sie eine transformRequest-Funktion, die ein Objekt in Form Encoded-Daten konvertiert.

In dem überarbeiteten Beispiel haben Sie das durch JSON.stringify ersetzt, das ein Objekt in JSON konvertiert.

In beiden Fällen haben Sie 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', so dass Sie behaupten, dass in beiden Fällen formularcodierte Daten gesendet werden.

Verwenden Sie anstelle von JSON.stringify die Funktion zur Formularcodierung.


Erneut aktualisieren:

In Ihrem ersten fetch-Beispiel setzen Sie die body als JSON-Wert.

Jetzt haben Sie eine Version mit Formularcodierung erstellt. Statt jedoch body auf diesen Wert festzulegen, haben Sie ein neues Objekt erstellt und die Formularcodierungsdaten als Eigenschaft dieses Objekts festgelegt.

Erstellen Sie nicht dieses zusätzliche Objekt. Weisen Sie einfach Ihren Wert body zu. 

1
Quentin
*/ 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))
    })

Nachdem ichnpm benutzt habe, frage ich ab, ob --save funktioniert.

0
Akshita Agarwal

Gemäß der Spezifikation gibt die Verwendung von encodeURIComponent keine konforme Abfragezeichenfolge an. Es sagt aus:

  1. Steuerelementnamen und -werte werden mit Escapezeichen versehen. Leerzeichen werden durch + ersetzt, und reservierte Zeichen werden wie in [RFC1738], Abschnitt 2.2 beschrieben, mit Escapezeichen versehen: Nicht-alphanumerische Zeichen werden durch %HH, ein Prozentzeichen und zwei hexadezimale Ziffern für ASCII Code des Zeichens. Zeilenumbrüche werden als "CR LF" -Paare (d. H. %0D%0A) dargestellt.
  2. Die Namen/Werte der Steuerelemente werden in der Reihenfolge aufgeführt, in der sie im Dokument angezeigt werden. Der Name wird durch = vom Wert getrennt, und Name/Wert-Paare werden durch & voneinander getrennt.

Das Problem ist, dass encodeURIComponent Leerzeichen codiert, die %20 sind, nicht +.

Der Formularkörper sollte mit einer Variation der in den anderen Antworten gezeigten encodeURIComponent-Methoden codiert werden.

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"
0
papiro