Almost everything visible in the user's browser is transmitted over HTTP, so these network requests play an important role in Internet communication. A key component of HTTP requests is the header. The HTTP request header is used to provide additional information about the request. For example, information about the request, the sender, and details about how the sender wants to connect with the recipient.
Axios is a flexible and powerful solution for making HTTP requests, and intercept HTTP responses from applications and browsers. But Axios can do more. In addition to the standard CRUD features of the HTTP client you are expecting, Axios also offers a range of other useful built-in features such as configuring default values, error handling, request cancellation, and automatic serialization of JavaScript objects to JSON.
In this article, we will explore different ways Axios uses to set request headers for API calls.
Install Axios
For the examples used in this article, we will install Axios from the CDN. It can also be installed with npm, Yarn or Bower.
Below are scripts or commands for each method.
//via cdn
<script src="/npm/axios/dist/"></script>
// via npm
$ npm install axios
// via yarn
$ yarn add axios
// via bower
$ bower install axios
Let's explore different ways we can set request headers for API calls using Axios.
- Pass an object parameter
- Create a specific Axios instance
- Using Axios Interceptor
Pass an object parameter
Such aspost()andget()etc. The Axios method enables us to attach header information to the request by taking the header information object as the second parameter of the GET request and the third parameter of the POST request.
Let's see how this works for single and multiple requests.
Single request
POST and GET requests are used to create or retrieve a resource, respectively. Here are some examples of one-time or single requests.
First, we declareconfigObject, which containsheadersObject, which will be provided as a parameter when request is made. We also declared aapi endpointAnd onedataObject.
const config = {
headers:{
header1: value1,
header2: value2
}
};
const url = "api endpoint";
const data ={
name: "Jake Taper",
email: "taperjake@"
}
We can use GET requests to request from API endpointurlSearchconfigObject.
(url, config)
.then(res=> (res))
.catch(err=> (err))
In this example, we put the API endpointurlPass it in as the first parameter,configObject as the second parameter.
We can use POST requests todataObject passed to API endpointurl 。
(url, data, config)
.then(res => (res))
.catch(err => (err))
In this example, we put the API endpointurlAs the first parameter, putdataThe object is used as the second parameter,configObject as the third parameter.
Multiple requests
In some cases, it may be necessary to automatically set headers for multiple or subsequent requests. We can solve this problem by specifying the configuration default value.
This code sets authorization header information for all requests.
['Authorization'] = `Bearer ${('access_token')`;
This code is allpostSet the authorization header for the request.
['Authorization'] = `Bearer ${('access_token')`;
Create a specific Axios instance
We can also set request headers for API calls by creating a specific Axios instance.
We can userequireTo create a new Axios instance.
const axios = require('axios')
However, this option does not allow us to pass in the configuration. In order to correctly set the header information for each request, we canCreate an Axios instance using, and then set up a custom configuration on the instance.
let reqInstance = ({
headers: {
Authorization : `Bearer ${("access_token")`
}
}
})
We can reuse this configuration every time we use this specific instance for a request.
When we usereqInstanceWhen a request is made, the authorization header will be attached.
(url);
Using Axios Interceptor
We can also use the Axios interceptor to set request headers for API calls. The Axios interceptor is a function called by Axios. An interceptor can be used to change it before a request is sent, or to modify it before a response is delivered. Interceptors are essentially equivalent to ExpressorMongoose middleware.
I've done a project before that requires that an authorization header with a user access token is attached to each request. This is a financial application and the system needs to verify the user's identity for each request. In this example, it is better to automatically attach the authorization headers to each request instead of setting them separately.
Authentication is one of the most common applications of interceptors. Client applications often verify user identity to the server by submitting a secret access token in the authorization header.
We can use the Axios interceptor to automatically set all requestsAuthorization header。
// Request interceptors for API calls
(
config => {
['Authorization'] = `Bearer ${('access_token')`};
return config;
},
error => {
return (error);
}
);
In this example, we useMethod to update each request header andAuthorizationSet the access token in the HTTP header.
WeThe object inAuthorizationThe header is the target and will be stored inlocalStorageIn-houseBearerSet the token to its value.
The Axios interceptor is also useful for monitoring whether an access token is about to expire. onerefreshToken()Functions can be used to update the token before it expires.
const refreshToken= ()=>{
// gets new access token
}
We can also call()Method to get a new access token, as long as the response returns403Error, which means that the existing token has expired.
// Response interceptor for API calls
(
response => {
return response;
},
error => {
if( == 403){
refreshToken()
}
}
);
In this example,Method intercepts all incoming responses and checksresponsestatus. If triggeredresponseThe request has not been verified, and the token expires. In this case, we callrefreshToken()Function to obtain a new access token.
Summarize
In this article, we examine how to set up HTTP request headers with Axios by passing an object, creating a specific Axios instance, and using an Axios interceptor. About other features of the Axios HTTP client,Official website