Format x-www-form-urlencoded

URLSearchParams

Par défaut, axios sérialise les objets JavaScript en JSON. Pour envoyer des données au format application/x-www-form-urlencoded à la place, vous pouvez utiliser l'API URLSearchParams, supportée par la grande majorité des navigateurs, et Node.js depuis la version v10 (publiée en 2018).

const params = new URLSearchParams({ foo: 'bar' });
params.append('extraparam', 'value');
axios.post('/foo', params);

Chaîne de requête Très ancien

Pour les navigateurs plus anciens ou les environnements sans URLSearchParams, vous pouvez utiliser la bibliothèque qs pour sérialiser des objets au format application/x-www-form-urlencoded.

const qs = require('qs');
axios.post('/foo', qs.stringify({ bar: 123 }));

Pour un contrôle complet sur les en-têtes et la méthode, passez la sortie de qs.stringify comme data de la requête et définissez Content-Type explicitement :

import qs from 'qs';

const data = { bar: 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url: '/foo',
};
axios(options);

Dans les très anciennes versions de Node.js, vous pouvez utiliser le module natif querystring fourni avec Node.js. Notez que ce module a été déprécié dans Node.js v16 — préférez URLSearchParams ou qs pour le nouveau code.

const querystring = require('querystring');
axios.post('https://something.com/', querystring.stringify({ foo: 'bar' }));

Préférez qs pour les objets imbriqués

La bibliothèque qs est préférable si vous devez sérialiser des objets imbriqués, car la méthode querystring présente des problèmes connus avec ce cas d'usage.

Sérialisation automatique vers URLSearchParams Nouveau

À partir de la version v0.21.0, axios sérialise automatiquement les objets JavaScript en URLSearchParams si l'en-tête Content-Type est défini à application/x-www-form-urlencoded. Cela signifie que vous pouvez passer directement un objet JavaScript à la propriété data de la configuration de requête axios. Par exemple lors de l'envoi de données vers une requête POST :

const data = {
  x: 1,
  arr: [1, 2, 3],
  arr2: [1, [2], 3],
  users: [
    { name: 'Peter', surname: 'Griffin' },
    { name: 'Thomas', surname: 'Anderson' },
  ],
};

await axios.postForm('https://postman-echo.com/post', data, {
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
});

L'objet data sera automatiquement sérialisé en URLSearchParams et envoyé au format application/x-www-form-urlencoded. Le serveur recevra les données suivantes :

{
  "x": "1",
  "arr[]": ["1", "2", "3"],
  "arr2[0]": "1",
  "arr2[1][0]": "2",
  "arr2[2]": "3",
  "users[0][name]": "Peter",
  "users[0][surname]": "Griffin",
  "users[1][name]": "Thomas",
  "users[1][surname]": "Anderson"
}

Si le body-parser de votre backend (comme body-parser d'express.js) prend en charge le décodage des objets imbriqués, vous obtiendrez automatiquement le même objet côté serveur.

Limite de profondeur pour la sérialisation des paramètres

Lorsqu'axios sérialise un objet params via AxiosURLSearchParams, le même parcours récursif utilisé par le sérialiseur FormData est appelé. Une option maxDepth (par défaut 100) limite la profondeur de récursion. Les charges utiles dépassant la limite lèvent une AxiosError avec code: 'ERR_FORM_DATA_DEPTH_EXCEEDED' au lieu de provoquer un débordement de pile d'appels.

// Augmenter la limite si votre objet params nécessite légitimement plus de 100 niveaux d'imbrication :
axios.get('/api', { params: deepObject, paramsSerializer: { maxDepth: 200 } });

Note de sécurité

N'augmentez maxDepth que si votre schéma le nécessite réellement. La valeur par défaut de 100 protège le code côté serveur qui transfère des données contrôlées par le client vers axios en tant que params contre les attaques DoS via des objets profondément imbriqués.

var app = express();

app.use(bodyParser.urlencoded({ extended: true })); // support des corps encodés

app.post('/', function (req, res, next) {
  // écho du corps en JSON
  res.send(JSON.stringify(req.body));
});

server = app.listen(3000);