A key component of an HTTP request is the header.
HTTP request headers are used to provide additional information about the request.
In this article, we’ll explore different ways that Axios can be used to set request headers for API calls.
For the examples used in this article, we’ll install Axios from a CDN.
It may also be installed with npm, Yarn, or Bower.
Here’s the script or command for each method:.
The POST and GET requests are used to create or retrieve a resource, respectively.
Here are some examples for one-time or individual requests.
First, we declare the config object, containing the headers object, which will be supplied as an argument when making requests.
In this example, we pass in the API endpoint url as the first argument, a data object as the second argument, and the config object as the third argument.
We can address this by specifying configuration defaults. This code sets authorization headers for all requests:.
This code sets authorization headers for all post requests:. We can also set request headers for API calls by creating a specific instance of Axios.
We can use require to create a new instance of Axios:. However, this option does not allow us to pass in the configs.
To correctly set up the headers for each request, we can create an instance of Axios using axios.create and then set a custom configuration on that instance:.
When we use the reqInstance to make a request, the authorization header will be attached:.
Axios interceptors are functions that are called by Axios.
Interceptors are essentially equivalent to middleware from Express or Mongoose.
I previously worked on a project that required an authorization header, containing the user access token, to be appended to every request.
A client app often verifies user identity to the server by submitting a secret access token in the authorization header.
We can use Axios interceptors to automatically set the Authorization header for all requests:.
In this example, we use the axios.interceptors.request.use method to update each request header and set the access token in the Authorization HTTP header.
We target the Authorization header from the config.headers object and set a Bearer token, which is stored in localStorage, as its value.
A refreshToken() function may be used to update a token before it expires:. We can also call the axios.interceptors.response.use() method to get a new access token whenever a response returns a 403 error, meaning the existing token has expired:.
If the request that triggered the response is not authenticated, then the token is expired. In that case, we call for the refreshToken() function to obtain a new access token. In this article, we examined how to set HTTP request headers with Axios by passing an object, creating a specific Axios instance, and using Axios interceptors.
For information about additional features of the Axios HTTP client, see its website or GitHub. There’s no doubt that frontends are getting more complex.
LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.
Build confidently — Start monitoring for free.
HTTP is a protocol that web apps use to fetch data from the internet. Everything on your browser is transmitted over HTTP using requests.
Headers are a vital part of these requests. HTTP headers allow clients and servers to talk to each other and pass extra bits of information or instructions.
They usually contain instructions about the required data and information about the client. The server can use these headers to customize the response.
Some examples of request headers include:. Authentication and Authorization. Axios is a data fetching package that lets you send HTTP requests using a promise-based HTTP client.