POST JSON with Axios

Jun 12, 2020

If you pass a JavaScript object as the 2nd parameter to the axios.post() function, Axios will automatically serialize the object to JSON for you. Axios will also set the Content-Type header to 'application/json', so web frameworks like Express can automatically parse it.

// Axios automatically serializes `{ answer: 42 }` into JSON.
const res = await axios.post('https://httpbin.org/post', { answer: 42 });

res.data.data; // '{"answer":42}'
res.data.headers['Content-Type']; // 'application/json;charset=utf-8',

This means you normally don't have to worry about serializing POST bodies to JSON: Axios handles it for you.

With Pre-Serialized JSON

If you happen to have a serialized JSON string that you want to send as JSON, be careful. If you pass a string to axios.post(), Axios treats that as a form-encoded request body.

const json = JSON.stringify({ answer: 42 });
const res = await axios.post('https://httpbin.org/post', json);

// Axios automatically sets the `Content-Type` based on the
// 2nd parameter to `axios.post()`.
res.data.headers['Content-Type']; // 'application/x-www-form-urlencoded',

The solution is easy: make sure you set the Content-Type header if you pass a pre-serialized JSON string to axios.post().

const json = JSON.stringify({ answer: 42 });
const res = await axios.post('https://httpbin.org/post', json, {
  headers: {
    // Overwrite Axios's automatically set Content-Type
    'Content-Type': 'application/json'
  }
});

res.data.data; // '{"answer":42}'
res.data.headers['Content-Type']; // 'application/json',

More Axios Tutorials