How to send urlencoded data using Axios
Learn how to send urlencoded data using Axios
I had this problem: an API I had to call from a Node.js app was only accepting data using the urlencoded format.
I had to figure out this problem: how to send urlencoded data using Axios?
The first thing we need to do is to install the qs
module. It’s a cool querystring parsing and stringifying library with some added security:
npm install qs
Then we need to import the qs
module along with the Axios import, of course:
const qs = require('qs')
const axios = require('axios')
If you use ES Modules, use
import qs from 'qs'
import axios from 'axios'
Next, the Axios code. Check my full Axios tutorial if you are not familiar with it.
In short, we need to use the full form for the Axios request. Not axios.post()
but axios()
.
Inside there, we use the stringify()
method provided by qs
and we wrap the data into it. We then set the content-type
header:
axios({
method: 'post',
url: 'https://my-api.com',
data: qs.stringify({
item1: 'value1',
item2: 'value2'
}),
headers: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
}
})
I wrote 21 books to help you become a better developer:
- HTML Handbook
- Next.js Pages Router Handbook
- Alpine.js Handbook
- HTMX Handbook
- TypeScript Handbook
- React Handbook
- SQL Handbook
- Git Cheat Sheet
- Laravel Handbook
- Express Handbook
- Swift Handbook
- Go Handbook
- PHP Handbook
- Python Handbook
- Linux Commands Handbook
- C Handbook
- JavaScript Handbook
- Svelte Handbook
- CSS Handbook
- Node.js Handbook
- Vue Handbook
Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025