How to Create Axios GET Call with Authorization Header in React JS

In React JS, making HTTP requests is a common task, and Axios is a popular choice for handling these requests. One common requirement is to include a global authorization header in Axios GET calls to authenticate requests to an API server.

Setting Up Global Authorization Header in Axios

Making Axios GET requests with a global authorization header requires a few steps. First, you need to import Axios into your React component. Then, you set the default headers for Axios to include the authorization token.

Creating the Issue

When attempting to create Axios GET calls with a global authorization header, you may encounter issues if the header is not set properly. This can result in failed authentication and denied access to the requested resources from the API server.

To create the issue, let’s consider a scenario where you have a React application that communicates with an API server. You want to fetch data from the server using Axios GET requests, and the server requires authentication using an authorization token sent in the request header.

// Example React component making Axios GET request with global authorization header
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.yawintutor.com/data');
        setData(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {/* Display fetched data */}
    </div>
  );
};

export default MyComponent;

Root Cause of the Issue

The root cause of the issue lies in how the authorization header is set in the Axios configuration. If the header is not properly configured to include the authorization token, the API server will reject the requests, resulting in failed authentication.

Solution 1: Set Axios Default Headers

One solution is to set the default headers for Axios to include the authorization token globally in your application.

axios.defaults.headers.common['Authorization'] = 'Bearer your_auth_token';

Solution 2: Use Axios Interceptors

Another solution is to use Axios interceptors to intercept outgoing requests and attach the authorization token dynamically.

axios.interceptors.request.use(config => {
  const token = 'Bearer your_auth_token';
  config.headers.Authorization = token;
  return config;
});

Solution 3: Pass Authorization Header with Each Request

You can also pass the authorization header with each Axios request individually by including it in the request configuration.

const response = await axios.get('https://api.yawintutor.com/data', {
  headers: {
    Authorization: 'Bearer your_auth_token'
  }
});

Solution 4: Utilize Axios Instances

Creating Axios instances with pre-configured default headers is another way to ensure that the authorization header is included in every request.

const instance = axios.create({
  baseURL: 'https://api.yawintutor.com',
  headers: {
    Authorization: 'Bearer your_auth_token'
  }
});

Solution 5: Store Authorization Token in State Management

If your application uses state management like Redux, you can store the authorization token in the state and access it whenever needed to include in Axios requests.

const authToken = useSelector(state => state.auth.token);

// Use authToken in Axios requests

These solutions provide different approaches to ensure that Axios GET calls include a global authorization header in React JS applications, thereby addressing authentication issues when communicating with API servers.