Sending POST JSON Requests With Axios

Introduction

Axios is a promise-based HTTP client library that makes it simple to send asynchronous HTTP requests (such as POST, GET, and DELETE) to REST endpoints, mainly APIs.

In this article, we will learn how to send POST JSON requests with Axios, and how to handle both previously serialized and unserialized data.

How to Send POST JSON Requests Using Axios

The POST request is used to send data to an endpoint. For example, if we have a registration page where users submit their information, this information can be sent as JSON to the endpoint we specify using a POST JSON request.

We use the axios.post() method to send a POST request with Axios, which takes two major parameters - the URL of the endpoint (url), and the object representing data we want to post (data):

axios.post(url[, data[, config]])

Besides those two parameters, there is also a third one - config. It is used to configure the POST request we are sending, mainly to set headers.

Sending Unserialized Data

It is important to note that Axios uses JSON for data posting by default, meaning that any object we pass into Axios automatically serializes the object to JSON and sets the Content-Type header to application/json. Let's illustrate that in the example - assume we are posting the object { name: 'John Doe' }:

const result = await axios.post('https://testapi.org/post', { name: 'John Doe' });

Axios will automatically serialize the object into JSON format:

console.log(result.data.data); // '{"name":"John Doe"}'

And as we said, it will also set our Content-Type header to application/json:

console.log(result.data.headers['Content-Type']); // 'application/json;charset=utf-8'

Sending Serialized JSON String

So far, we've seen that Axios will automatically serialize whatever data we send it, but in this case, we'll send a serialized JSON string as the second parameter of the axios.post() method:

const usersName = JSON.stringify({ name: 'John Doe' });

Axios will simply treat this data as a form-encoded request body rather than setting the content-type header to application/json, as shown below:

const usersName = JSON.stringify({ name: 'John Doe' });
const result = await axios.post('https://testapi.org/post', usersName);

console.log(result.data.headers['Content-Type']); // 'application/x-www-form-urlencoded',

To resolve this issue, we need to explicitly set the Content-Type header to application/json. We can do that by passing the config argument when calling the axios.post() method:

const usersName = JSON.stringify({ name: 'John Doe' });
customConfig = {
    headers: {
    'Content-Type': 'application/json'
    }
};
const result = await axios.post('https://testapi.org/post', usersName, customConfig);

console.log(result.data.data); // '{"name":"John Doe"}'
console.log(result.data.headers['Content-Type']); // 'application/json',

Conclusion

In this article, we learned how to send POST JSON requests with Axios, fully aware that these data could be serialized or non-serialized, and we dealt with both scenarios.