URL-Encoder le contenu d’une requête

Par défaut, Axios serialise les objets JavaScript en JSON. Pour plutôt envoyer les données au format application/x-www-form-urlencoded, vous pouvez utiliser l’une des options suivantes.

Dans le navigateur

Dans le navigateur, vous pouvez utiliser l’API URLSearchParams comme ceci :

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

Note : URLSearchParams n’est pas supporté par tous les navigateurs (voir caniuse.com), mais un polyfill est disponible (prenez soin de polyfiller l’environnement global).

Autrement, vous pouvez encoder les données avec la librairie qs :

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

Ou sinon (ES6),

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,
};
axios(options);

Avec node.js

querystring

Avec node.js, vous pouvez utiliser le module querystring comme ceci :

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

ou bien le constructeur URLSearchParams du module url comme ceci :

const url = require('url');
const params = new url.URLSearchParams({ foo: 'bar' });
axios.post('http://something.com/', params.toString());

Vous pouvez également utiliser la librairie qs.

Note : la librairie qs est préférable si vous devez stringifier des objets imbriqués, car la méthode querystring est connue pour causer des problèmes dans ce cas-là.

form-data

Avec node.js, vous pouvez utiliser la librairie form-data comme ceci :

const FormData = require('form-data');
 
const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Buffer(10));
form.append('my_file', fs.createReadStream('/foo/bar.jpg'));

axios.post('https://example.com', form, { headers: form.getHeaders() })

Autrement, vous pouvez utiliser un intercepteur :

axios.interceptors.request.use(config => {
  if (config.data instanceof FormData) {
    Object.assign(config.headers, config.data.getHeaders());
  }
  return config;
});