javascript - example - x www form urlencoded header

Publique una solicitud x-www-form-urlencoded de React Native

Question

Tengo algunos parámetros que quiero POST codificar de forma en mi servidor:

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

Estoy enviando mi solicitud (actualmente sin parámetros) como este

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

¿Cómo puedo incluir los parámetros codificados en el formulario en la solicitud?

Answer 1

Aún más simple:

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

Answer 2

Acabo de hacer esto y UrlSearchParams hizo el truco Aquí está mi código si ayuda a alguien

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

Answer 3

De acuerdo con las especificaciones , el uso de encodeURIComponent no le dará una cadena de consulta conforme. Afirma:

1. Los nombres y valores de control se escapan. Los caracteres de espacio se reemplazan por + , y luego los caracteres reservados se escapan como se describe en [RFC1738], sección 2.2: Los caracteres no alfanuméricos se reemplazan por %HH , un signo de porcentaje y dos dígitos hexadecimales que representan el código ASCII del carácter. Los saltos de línea se representan como pares "CR LF" (es decir, %0D%0A ).
2. Los nombres / valores de control se enumeran en el orden en que aparecen en el documento. El nombre está separado del valor por = y los pares nombre / valor están separados entre sí por & .

El problema es que encodeURIComponent codifica espacios para ser %20 , no + .

El cuerpo del formulario debe codificarse utilizando una variación de los métodos encodeURIComponent que se muestran en las otras respuestas.

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"

Answer 4

En el ejemplo original, tiene una función transformRequest que convierte un objeto en datos codificados de formulario.

En el ejemplo revisado, ha reemplazado eso con JSON.stringify que convierte un objeto a JSON.

En ambos casos tiene ''Content-Type'': ''application/x-www-form-urlencoded; charset=UTF-8'' ''Content-Type'': ''application/x-www-form-urlencoded; charset=UTF-8'' por lo que afirma estar enviando datos codificados en el formulario en ambos casos.

Use su función de codificación de formulario en lugar de JSON.stringify .

Re actualizar:

En su primer ejemplo de fetch , configura el body para que sea el valor JSON.

Ahora ha creado una versión codificada de formulario, pero en lugar de establecer el body para que sea ese valor, ha creado un nuevo objeto y ha configurado los datos codificados de formulario como una propiedad de ese objeto.

No crees ese objeto extra. Solo asigna tu valor al body .

Answer 5

Para cargar solicitudes POST codificadas por formulario, recomiendo usar el objeto FormData .

Código de ejemplo:

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

Answer 6

Si está utilizando JQuery, esto también funciona.

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

Answer 7

Solo usa

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

Answer 8

Tienes que armar la carga útil x-www-form-urlencoded tú mismo, así:

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

Tenga en cuenta que si estaba utilizando fetch en un navegador (lo suficientemente moderno), en lugar de React Native, podría crear un objeto URLSearchParams y usarlo como cuerpo, ya que Fetch Standard establece que si el body es un objeto URLSearchParams entonces debería ser serializado como application/x-www-form-urlencoded . Sin embargo, no puede hacer esto en React Native porque React Native no implementa URLSearchParams .

Answer 9

Use URLSearchParams

URLSearchParams

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

Answer 10

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

Después de usar npm i querystring --save , funciona bien.