Table of Contents
On the web, headers are used to pass information about the request and response.
Therefore, it can be very useful to know how to add your own headers to requests that you make using the popular Axios HTTP library.
In this post, we'll learn how to add headers to your Axios requests.
How to add headers to your Axios requests
Let's start with a basic GET request:
JAVASCRIPTconst response = await axios.get("https://sabe.io/");
console.log(response.data);
Now, let's add an authorization header to our request by utilizing the options object as our second parameter.
JAVASCRIPTconst options = {
headers: {
Authorization: "Bearer <your-token>"
}
};
const response = await axios.get("https://sabe.io/", options);
console.log(response.data);
Now this request should have an authorization header on it.
Let's look at how we can pass headers using POST instead of GET:
JAVASCRIPTconst payload = {
email: " <your-email>",
password: "<your-password>"
};
const options = {
headers: {
Authorization: "Bearer <your-token>"
}
};
const response = await axios.post("https://sabe.io/", payload, options);
console.log(response.data);
In this case, we have to pass the options as the third parameter because the second one is being used for the payload.
Keep in mind that this will also work with PUT and DELETE.
Conclusion
In this post, we learned how to add headers to your Axios requests.
Simply create an options object, add your headers, then pass in the options object to Axios.
Thanks for reading!
- Managing PHP Dependencies with Composer
- Getting Started with Express
- Git Tutorial: Learn how to use Version Control
- How to Serve Static Files with Nginx and Docker
- How to deploy a .NET app using Docker
- How to deploy a Deno app using Docker
- Getting Started with Deno
- Learn how to use v-model with a custom Vue component
- Getting Started with Handlebars.js
- Getting User Location using JavaScript's Geolocation API
- Getting Started with Moment.js
- Using Axios to Pull Data from a REST API