axiosで共通のheaderを追加したい

Question

いつもお世話になっております。

現在ReactJSとReact-router-domを使用してSPAアプリケーションを作っております。
また、XhrHttpRequestに関してはaxiosというmoduleを使っております。

axiosの使い方はおそらく一般的な使い方で、yarn add -D axiosでアプリケーションローカルにインストール。
その後、必要なファイルにimportして使っています。
例

import React, {Component} from 'react'
import axios from 'axios'

export default class Hoge extends Component{
  // hogehote
}

本題なのですが、諸事情あり、すべてのaxiosにaxios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';を付けなくてはならなくなりました。

必要になる各ファイルでaxiosを読み込んでいるので、すべてのファイルに上記のような設定を書く必要があるのですが、どこかにaxiosの設定を一括して書くことは出来ないのでしょうか？

よろしくお願いします。

Answer 1

以下のような感じで、axiosの各種パラメータを設定済みのものを返してあげるモジュールを作ると解決するかと思います。

http.js

import axios from 'axios'
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
export default axios

利用側

import http from 'js/xxx/http.js'

Comments

[MasakazuFukami]

おぉ！！！
なるほど！！

ありがとうございます！！！