Axios Headers

HTTP headers contain additional information about an HTTP request or response.

Request
   ↓
Headers
   ↓
PHP REST API
   ↓
Response

Headers can describe the data format, authentication information, accepted response format and other request details.

• Send authentication tokens.
• Specify request data format.
• Specify accepted response format.
• Send application-specific information.
• Control how the server interprets a request.

Axios allows headers to be specified inside the request configuration object.

const response =
    await axios.get(
        API_URL,
        {
            headers: {
                "Accept":
                    "application/json"
            }
        }
    );

The Accept header tells the server what response format the client can accept.

headers: {
    "Accept":
        "application/json"
}

For a JSON REST API, application/json is commonly used.

The Content-Type header describes the format of the request body.

headers: {
    "Content-Type":
        "application/json"
}

This is commonly used when React Native sends JSON data to a PHP API.

const response =
    await axios.post(

        API_URL,

        {
            name: "Rahul",
            email: "rahul@example.com"
        },

        {
            headers: {
                "Content-Type":
                    "application/json"
            }
        }
    );

The Authorization header is commonly used to send authentication credentials or tokens.

headers: {
    Authorization:
        `Bearer ${token}`
}

The server can read this token and verify the user's identity.

JWT authentication commonly uses the Bearer authentication scheme.

Authorization:
Bearer eyJhbGciOiJIUzI1Ni...

The word Bearer is followed by the access token.

const response =
    await axios.get(
        API_URL,
        {
            headers: {
                Authorization:
                    `Bearer ${token}`
            }
        }
    );

const response =
    await axios.post(

        API_URL,

        {
            name: "Rahul",
            course: "React Native"
        },

        {
            headers: {
                Authorization:
                    `Bearer ${token}`
            }
        }
    );

const response =
    await axios.get(
        API_URL,
        {
            headers: {

                "Accept":
                    "application/json",

                "Content-Type":
                    "application/json",

                "Authorization":
                    `Bearer ${token}`
            }
        }
    );

const api =
    axios.create({

        baseURL:
            "https://example.com/api",

        headers: {
            "Accept":
                "application/json"
        }

    });

Common headers can be configured once in an Axios instance.

Axios allows default headers to be configured for an instance.

const api =
    axios.create({

        baseURL:
            "https://example.com/api",

        headers: {
            "Accept":
                "application/json"
        }

    });

These headers can be used automatically for requests made through the instance.

const api =
    axios.create({

        baseURL:
            "https://example.com/api",

        headers: {
            Authorization:
                `Bearer ${token}`
        }

    });

For applications where the token changes after login, interceptors are often a better approach.

The PHP API needs to read the Authorization header when JWT authentication is being used.

$headers =
    getallheaders();

$authorization =
    $headers['Authorization']
    ?? '';

$authorization =
    $headers['Authorization']
    ?? '';

if (
    !preg_match(
        '/Bearer\s+(.+)/i',
        $authorization,
        $matches
    )
) {

    http_response_code(401);

    echo json_encode([
        "success" => false,
        "message" =>
            "Authorization token required"
    ]);

    exit;
}

$token = $matches[1];

After extracting the token, the PHP API can verify the JWT signature, expiration and claims.

Authorization
      ↓
Bearer Token
      ↓
Extract Token
      ↓
Verify JWT
      ↓
Identify User
      ↓
Allow API Request

const response =
    await axios.put(

        `${API_URL}?id=10`,

        {
            name: "Rahul Kumar",
            course: "TypeScript"
        },

        {
            headers: {
                "Content-Type":
                    "application/json",

                Authorization:
                    `Bearer ${token}`
            }
        }
    );

const response =
    await axios.delete(

        `${API_URL}?id=10`,

        {
            headers: {
                Authorization:
                    `Bearer ${token}`
            }
        }
    );

DELETE requests can also require authentication and authorization.

• Use HTTPS for API communication.
• Do not put JWT tokens in URLs.
• Use Authorization headers for access tokens.
• Never send passwords in unnecessary headers.
• Validate and verify tokens on the server.
• Use appropriate authorization checks.

Headers and query parameters can be used in the same Axios request.

const response =
    await axios.get(

        API_URL,

        {
            params: {
                search: "rahul",
                page: 1,
                limit: 10
            },

            headers: {
                Authorization:
                    `Bearer ${token}`
            }
        }
    );

try {

    const response =
        await axios.get(
            API_URL,
            {
                headers: {
                    Authorization:
                        `Bearer ${token}`
                }
            }
        );

    console.log(
        response.data
    );

} catch (error) {

    if (error.response) {

        console.log(
            error.response.status
        );

        console.log(
            error.response.data
        );

    } else {

        console.log(
            "Network error"
        );
    }
}

async function getProfile(
    token
) {

    const response =
        await axios.get(
            API_URL,
            {
                headers: {
                    Authorization:
                        `Bearer ${token}`
                }
            }
        );

    return response.data;
}

Reusable functions help keep API communication separate from UI components.

When many API requests need the same authentication header, Axios interceptors can automatically add the token.

api.interceptors.request.use(
    config => {

        config.headers.Authorization =
            `Bearer ${token}`;

        return config;

    }
);

Interceptors will be covered in detail in a later lesson.

import axios from "axios";

const api =
    axios.create({

        baseURL:
            "https://example.com/api",

        timeout: 10000,

        headers: {
            "Accept":
                "application/json",

            "Content-Type":
                "application/json"
        }

    });

export default api;

This instance can be imported into different React Native screens.

import axios from "axios";

const API_URL =
    "https://example.com/api/profile.php";

async function getProfile(token) {

    try {

        const response =
            await axios.get(
                API_URL,
                {
                    headers: {

                        "Accept":
                            "application/json",

                        "Authorization":
                            `Bearer ${token}`

                    }
                }
            );

        return response.data;

    } catch (error) {

        if (error.response) {

            console.log(
                error.response.status
            );

            console.log(
                error.response.data
            );

        } else {

            console.log(
                "Network error"
            );
        }

        throw error;
    }
}

• Misspelling the header name.
• Forgetting the Bearer prefix for JWT authentication.
• Sending the token in the URL instead of the Authorization header.
• Using an expired token.
• Not sending Content-Type when required by the API.
• Sending incorrect JSON data.
• Not using HTTPS for sensitive communication.
• Putting secrets directly into client-side application code.

import React, {
    useState
} from "react";

import {
    View,
    Text,
    Button
} from "react-native";

import axios from "axios";

const API_URL =
    "https://example.com/api/profile.php";

export default function Profile() {

    const [profile, setProfile] =
        useState(null);

    const [message, setMessage] =
        useState("");

    async function loadProfile() {

        const token =
            "YOUR_ACCESS_TOKEN";

        try {

            const response =
                await axios.get(
                    API_URL,
                    {
                        headers: {

                            "Accept":
                                "application/json",

                            "Authorization":
                                `Bearer ${token}`

                        }
                    }
                );

            setProfile(
                response.data.data
            );

            setMessage("");

        } catch (error) {

            setMessage(
                error.response?.data?.message ||
                "Unable to load profile"
            );
        }
    }

    return (

        <View style={{
            padding: 20
        }}>

            <Button
                title="Load Profile"
                onPress={loadProfile}
            />

            <Text>
                {profile?.name || ""}
            </Text>

            <Text>
                {profile?.email || ""}
            </Text>

            <Text>
                {message}
            </Text>

        </View>
    );
}

In a real application, the token should come from the application's authentication/token storage system rather than being hard-coded.

The same headers used by React Native can be tested in Postman.

Authorization:
Bearer YOUR_TOKEN

Accept:
application/json

Content-Type:
application/json

Postman is useful for checking whether the PHP API correctly accepts authentication and content headers before connecting it to React Native.

React Native
      ↓
     Axios
      ↓
Request Headers
      ↓
Authorization
Content-Type
Accept
      ↓
 PHP REST API
      ↓
Verify Headers
      ↓
Authenticate User
      ↓
Process Request
      ↓
 JSON Response
      ↓
 React Native

Understanding headers is essential before working with authenticated REST APIs. In the next lesson, we will learn how Axios handles API errors in more detail.