ReactでAxiosの共通ヘッダーやトークンを設定する方法を完全ガイド！初心者でもわかるAPI通信の基本

1. 共通ヘッダーとは？

1. 共通ヘッダーとは？

ヘッダーとは、APIにリクエストを送るときに一緒に渡す追加情報のことです。例えば、誰がアクセスしているかを示す「トークン」や、どの形式でデータを受け取りたいかを指定する「Content-Type」などがあります。

毎回同じ情報をヘッダーに書くのは手間なので、Axiosで共通設定をしておけば効率的にAPI通信ができます。

2. Axiosで共通ヘッダーを設定する基本方法

2. Axiosで共通ヘッダーを設定する基本方法

Axiosにはaxios.defaults.headersを使う方法があります。これを使うと、以降のリクエストに自動的に設定が反映されます。

import axios from "axios";

// 共通ヘッダーを設定
axios.defaults.headers.common["Authorization"] = "Bearer YOUR_TOKEN_HERE";
axios.defaults.headers.common["Content-Type"] = "application/json";

// APIを呼び出す
axios.get("https://api.example.com/data")
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error("エラー:", error);
  });

3. トークンとは何か？

3. トークンとは何か？

トークンとは、簡単にいうと「合言葉」や「入場チケット」のようなものです。サーバーはこのトークンを確認して、「この人はアクセスしていいかどうか」を判断します。

例えば、遊園地に入るときにチケットを見せるのと同じように、APIにアクセスするときにはトークンを渡す必要がある場合があります。

4. カスタムインスタンスを使って管理する方法

4. カスタムインスタンスを使って管理する方法

アプリが大きくなると、毎回axios.defaultsを使うより、専用のAxiosインスタンスを作るほうが管理しやすくなります。

import axios from "axios";

// 専用のAxiosインスタンスを作成
const api = axios.create({
  baseURL: "https://api.example.com",
  headers: {
    Authorization: "Bearer YOUR_TOKEN_HERE",
    "Content-Type": "application/json",
  },
});

// 使用例
api.get("/users")
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

5. Reactで状態に応じてトークンを設定する

5. Reactで状態に応じてトークンを設定する

実際のアプリでは、ログイン後に発行されるトークンを使うことが多いです。その場合は、ログイン成功時にローカルストレージに保存し、それをAxiosの共通ヘッダーに反映します。

import axios from "axios";

// ログイン処理後にトークンを保存
localStorage.setItem("token", "SAMPLE_TOKEN");

// Axiosインスタンスを作成
const api = axios.create({
  baseURL: "https://api.example.com",
});

// リクエスト前にトークンを設定
api.interceptors.request.use(config => {
  const token = localStorage.getItem("token");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

6. 実務での使いどころ

6. 実務での使いどころ

Axiosで共通のヘッダーやトークンを設定するのは、実務でとてもよく使います。例えば：

• ユーザーがログインしているか確認するAPI
• ショッピングサイトでカート情報を取得するAPI
• 会員制サービスでユーザーごとのデータを表示するAPI

こうしたときに毎回トークンを手動で渡すのではなく、自動で付与されるように設定しておくと安全で便利です。

7. 注意点

7. 注意点

共通ヘッダーの設定には注意も必要です。トークンは機密情報なので、むやみに公開してはいけません。GitHubなどにそのまま書いた状態でアップロードすると、不正アクセスの原因になります。

また、開発環境と本番環境で異なる設定を使う場合は、環境変数を利用して切り替えるのがおすすめです。

まとめ

まとめ

ここまで、React開発におけるAxiosの共通ヘッダー設定やトークン管理の方法について詳しく解説してきました。フロントエンド開発において、APIとの通信は避けて通れない非常に重要な要素です。特に、ユーザー認証が必要なWebアプリケーションでは、今回ご紹介した「認証トークン（JWTなど）」をリクエストヘッダーに含める作業が必須となります。

初心者のうちは、APIを呼び出すたびに個別にヘッダーを記述してしまいがちですが、コードの冗長化を防ぎ、保守性を高めるためには、「共通設定（Defaults）」や「カスタムインスタンス（axios.create）」、さらには「インターセプター（Interceptors）」を活用するのがプロフェッショナルな手法です。

効率的なAPI管理のポイント

実務レベルのプロジェクトでAxiosを導入する際は、以下のステップを意識することで、よりクリーンなソースコードを実現できます。

• ベースURLの一元管理： 開発環境と本番環境でエンドポイントを切り替える際、一箇所を修正するだけで済みます。
• インターセプターによる自動付与： ローカルストレージやCookieからトークンを取得し、リクエストの直前に自動でヘッダーへ差し込む仕組みを作ることで、実装漏れによる認証エラーを防げます。
• エラーハンドリングの共通化： 401（認証切れ）エラーが発生した際に、自動でログアウト処理を行ったり、リフレッシュトークンを使用してトークンを再取得したりする処理も共通化可能です。

実践的な実装サンプル：認証付きAxiosクライアント

これまでの内容を踏まえて、Next.jsやReactプロジェクトですぐに使える、より実践に近いTypeScript対応のAxios設定例を見てみましょう。

import axios from "axios";

// APIクライアントの作成
const apiClient = axios.create({
  baseURL: "https://api.your-service.com/v1",
  timeout: 5000, // 5秒でタイムアウト
  headers: {
    "Content-Type": "application/json",
  },
});

// リクエストインターセプター：送信前に必ず実行される
apiClient.interceptors.request.use(
  (config) => {
    // ローカルストレージから最新のトークンを取得
    const token = localStorage.getItem("access_token");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// レスポンスインターセプター：受け取り時に実行される
apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response && error.response.status === 401) {
      // 認証エラー時はログイン画面へリダイレクトなどの処理
      console.error("認証が期限切れです。再ログインしてください。");
    }
    return Promise.reject(error);
  }
);

export default apiClient;

今後の学習に向けて

ReactでのAPI通信をマスターしたら、次は「React Query（TanStack Query）」や「SWR」といった、データフェッチライブラリとの組み合わせを学習することをおすすめします。これらを活用することで、今回設定したAxiosの仕組みをベースにしつつ、データのキャッシュ管理やローディング状態のハンドリングをさらに簡潔に記述できるようになります。

セキュリティ面では、トークンを「localStorage」に保存する手法以外にも、セキュアな「HttpOnly Cookie」を利用する方法など、プロジェクトの要件に応じた選択肢があります。まずは基本となるヘッダー設定を完璧に使いこなせるようになりましょう。