How to Add a Custom Header to HTTP Request in React

Adding a Custom Header to HTTP Request in React

When building a web application with React, you often need to interact with APIs by sending HTTP requests. Adding custom headers to these requests can be essential for authentication, content type specification, or other purposes. This article will walk you through how to add a custom header to an HTTP request in React, using simple and beginner-friendly examples.

What Are HTTP Headers?

HTTP headers are key-value pairs sent in HTTP requests and responses. They contain important information about the request or response, such as the format of the content, authorization details, or other metadata. For example, when interacting with an API that requires an access token, you need to add a custom "Authorization" header to the request.

Setting Up a React Project

First, if you haven't done so already, make sure you set up a React project. You can do this easily by running:

npx create-react-app custom-header-example

Once your project is ready, navigate to the project directory:

cd custom-header-example

Now, open your project with your favorite code editor (e.g., VS Code).

Adding a Custom Header with Axios

One popular way to make HTTP requests in React is by using Axios, a promise-based library that simplifies HTTP communication. Let’s install Axios first:

npm install axios

Next, open your App.js file and modify it to add a custom header to an HTTP request.

Here’s a simple example:

import React, { useEffect } from 'react';
import axios from 'axios';

function App() {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data', {
          headers: {
            'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
            'Custom-Header': 'CustomHeaderValue'
          }
        });
        console.log(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div className="App">
      <h1>React HTTP Request with Custom Header</h1>
    </div>
  );
}

export default App;

Explanation

Import Axios: We import Axios to make HTTP requests.

useEffect: We use the useEffect hook to run the request when the component loads.

Add Custom Header: Inside the fetchData function, we add custom headers by passing an options object to the Axios get request.

Authorization and Custom Header: In this example, we have added an Authorization header with a Bearer token, as well as another header called Custom-Header.

Using the Fetch API

Another way to make HTTP requests in React is by using the native fetch API. Below is how you can add custom headers using fetch.

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data', {
          method: 'GET',
          headers: {
            'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
            'Custom-Header': 'CustomHeaderValue'
          }
        });
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div className="App">
      <h1>React HTTP Request with Custom Header</h1>
    </div>
  );
}

export default App;

Explanation

useEffect: We again use useEffect to run the request when the component mounts.

fetch: We use the fetch API and pass an object as the second parameter to configure the request.

Headers: The headers object includes the custom headers we want to add, such as Authorization and Custom-Header.

Common Use Cases for Custom Headers

Authentication: Adding tokens for API authentication (e.g., Bearer token).

Content-Type Specification: Specifying Content-Type as application/json when sending JSON data.

Custom Metadata: Adding additional information required by the server, like user agents or custom data indicators.

Summary

Adding custom headers to HTTP requests in React is straightforward. You can either use Axios or the built-in fetch API. Custom headers are crucial when you need to include additional information, like authentication tokens or content types.

By understanding the basic syntax, you can easily interact with secured APIs or add any metadata needed for your web application.