axiosで共通のヘッダーを付与する方法

概要

axiosを使ってHTTP通信を送る時、認証トークンなどを共通でヘッダーに付与させたい場合、リクエストインターセプターを使います。

コード例

以下は、HTTPリクエストに、認証トークンを保持するAuthorizationヘッダーを共通で付与する例です。

axios.ts

import axios from "axios";
import type { InternalAxiosRequestConfig } from "axios";

const axiosInstance = axios.create({
  baseURL: "http://localhost:5173/", // ベースURLを設定
  withCredentials: false
});

// リクエストインターセプターを追加
axiosInstance.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    const token = "jwtの認証トークンなど";
    // リクエストヘッダーに含める
    config.headers["Authorization"] = `Bearer ${token}`;

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default axiosInstance;

上記をインポートし、

import axiosInstance from "@/axios";

axiosInstance.post(endpoint);

のように使います。

詳細

リクエストインターセプターを使うことで、リクエストが送信される前に処理を挟むことが出来るようです。
これでどのリクエストにもAuthorizationヘッダーが付与された状態になりました。

※Cookieを付与させたい場合は、axios.createの箇所でwithCredentials: trueにする。

※上手くいかない場合は、backend側のCORS許可の設定を確認する必要があるかもしれません。

補足

レスポンスインターセプター(サーバーからのレスポンスが返される前に処理を挟むことができる)もあるみたいです。