By default, axios serializes JavaScript objects to JSON
. To send data in the application/x-www-form-urlencoded
format instead, you can use one of the following approaches.
In a browser, you can use the URLSearchParams
API as follows:
const params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); axios.post('/foo', params);
Note that
URLSearchParams
is not supported by all browsers (see caniuse.com), but there is a polyfill available (make sure to polyfill the global environment).
Alternatively, you can encode data using the qs
library:
const qs = require('qs'); axios.post('/foo', qs.stringify({ 'bar': 123 }));
Or in another way (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);
In node.js, you can use the querystring
module as follows:
const querystring = require('querystring'); axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));
or 'URLSearchParams' from 'url module' as follows:
const url = require('url'); const params = new url.URLSearchParams({ foo: 'bar' }); axios.post('http://something.com/', params.toString());
You can also use the qs
library.
Note: The
qs
library is preferable if you need to stringify nested objects, as thequerystring
method has known issues with that use case (https://github.com/nodejs/node-v0.x-archive/issues/1665).
Axios will automatically serialize the data object to urlencoded format if the content-type
header is set to application/x-www-form-urlencoded
.
This works both in the browser and in node.js
:
const data = { x: 1, arr: [1, 2, 3], arr2: [1, [2], 3], users: [{name: 'Peter', surname: 'Griffin'}, {name: 'Thomas', surname: 'Anderson'}], }; await axios.post('https://postman-echo.com/post', data, {headers: {'content-type': 'application/x-www-form-urlencoded'}} );
The server will handle it as
{ x: '1', 'arr[]': [ '1', '2', '3' ], 'arr2[0]': '1', 'arr2[1][0]': '2', 'arr2[2]': '3', 'arr3[]': [ '1', '2', '3' ], 'users[0][name]': 'Peter', 'users[0][surname]': 'griffin', 'users[1][name]': 'Thomas', 'users[1][surname]': 'Anderson' }
If your server framework's request body parser (like body-parser
of express.js
) supports nested objects decoding, you will automatically receive the same server object that you submitted.
Echo server example (express.js
) :
var app = express(); app.use(bodyParser.urlencoded({ extended: true })); // support url-encoded bodies app.post('/', function (req, res, next) { res.send(JSON.stringify(req.body)); }); server = app.listen(3000);
© 2020-present John Jakob "Jake" Sarjeant
Licensed under the MIT License.
https://axios-http.com/docs/urlencoded