How to make a POST JSON request with Axios

This content originally appeared on CodeSource.io and was authored by Deven

In this article, you will learn about Post JSON request with Axios.

In JavaScript, Axios is a library that is used to make HTTP requests from Node and is also used in front-end applications. It is a promise-based API.

You can Post JSON requests with Axios by calling axios.post() method. This method simply expects two parameters. The first one is URI and the second one is Object that contains the properties. In the second parameter, if you pass the JavaScript object, Axios will automatically serialize it into JSON for you and it will also set the Content-Type header to application/json. See the code example below:

const res = await axios.post('<https://test.org/post>', { name: 'deven' });

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

Now, what if you want to send a serialized JSON string as the second parameter of axios.post() method. Axios will simply treat it as a form-encoded request body instead of setting the content-type header to application/json. See the issue in the below:

const json = JSON.stringify({ name: 'deven' });
const res = await axios.post('<https://test.org/post>', json);

res.data.headers['Content-Type']; // 'application/x-www-form-urlencoded',

To avoid this unwanted situation you can simply set the content-type header explicitly and you may get your desired solution. For example:

const json = JSON.stringify({ name: 'deven' });
const res = await axios.post('<https://test.org/post>', json, {
  headers: {
    'Content-Type': 'application/json'
  }
});

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

The post How to make a POST JSON request with Axios appeared first on CodeSource.io.

This content originally appeared on CodeSource.io and was authored by Deven

Print Share Comment Cite Upload Translate Updates

APA

Deven | Sciencx (2021-12-01T05:19:54+00:00) How to make a POST JSON request with Axios. Retrieved from https://www.scien.cx/2021/12/01/%e2%80%8b%e2%80%8bhow-to-make-a-post-json-request-with-axios/

MLA

" » How to make a POST JSON request with Axios." Deven | Sciencx - Wednesday December 1, 2021, https://www.scien.cx/2021/12/01/%e2%80%8b%e2%80%8bhow-to-make-a-post-json-request-with-axios/

HARVARD

Deven | Sciencx Wednesday December 1, 2021 » How to make a POST JSON request with Axios., viewed ,<https://www.scien.cx/2021/12/01/%e2%80%8b%e2%80%8bhow-to-make-a-post-json-request-with-axios/>

VANCOUVER

Deven | Sciencx - » How to make a POST JSON request with Axios. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/01/%e2%80%8b%e2%80%8bhow-to-make-a-post-json-request-with-axios/

CHICAGO

" » How to make a POST JSON request with Axios." Deven | Sciencx - Accessed . https://www.scien.cx/2021/12/01/%e2%80%8b%e2%80%8bhow-to-make-a-post-json-request-with-axios/

IEEE

" » How to make a POST JSON request with Axios." Deven | Sciencx [Online]. Available: https://www.scien.cx/2021/12/01/%e2%80%8b%e2%80%8bhow-to-make-a-post-json-request-with-axios/. [Accessed: ]

rf:citation

» How to make a POST JSON request with Axios | Deven | Sciencx | https://www.scien.cx/2021/12/01/%e2%80%8b%e2%80%8bhow-to-make-a-post-json-request-with-axios/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Articles

Related Posts