【axios】で【独自ヘッダー】を追加する3つの方法

はじめに

HTTPリクエストに独自ヘッダーを追加するという要件が業務で発生しました。
axiosインスタンスの生成後にヘッダーを追加する必要があったのですが、その時にやり方を調べました。
本記事では、上記の要件だけでなくaxiosで独自ヘッダーを追加する3つの方法をご紹介します。

3つの方法

1.importしたaxios自体のdefaultsプロパティにヘッダーをセット

axios.defaults.headers.common['X-Custom-Header'] = 'hoge';

2.axiosインスタンス生成時にヘッダーをセット

const instance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {'X-Custom-Header': 'hoge'}
});

3.axiosインスタンスを生成した後にヘッダーをセット

// axiosインスタンスを生成
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 生成したaxiosインスタンスにヘッダーをセット
instance.defaults.headers.common['X-Custom-Header'] = 'hoge';

ヘッダーで日本語を含めたい場合

HTTPリクエストのヘッダーはASCII（アスキー）文字しか含めることが出来ません。
ASCII文字はアルファベットの小文字、大文字、数字、一部の記号、一部の特殊文字で構成されています。
つまり、日本語はASCII文字ではないので日本語をそのまま含めては送信時エラーになってしまいます。

// 日本語の「ほげ」が入っているのでエラー！
axios.defaults.headers.common['X-Custom-Header'] = 'ほげ';

日本語を含めたいのであれば、エンコードした値をヘッダーにセットして、サーバでは受け取った値をデコードする必要があります。
下記の記事も参考にご覧ください。

さいごに

公式のリンクも載せておきます。
本記事がどなたかの助けになれば幸いです。