Nuxtモジュールのaxiosでレスポンスヘッダが取得できない

Nuxtでaxiosを利用するときは、標準のものではなく、nuxt-community/axios-moduleを使うことが多いと思う。axiosをラップしているので、より使いやすくなってはいるが、その反面、あまり融通が効かない。

今回、ハマったのがレスポンスの取得である。

以下のコードを見て欲しい。

レスポンス取得

this.$axios.$post(`/login`,formData)
  .then(response => {
    console.log(response)
  })
  .catch(e => {
    console.log(e)
  })

さて、上記のリクエストを行ったときのログはどのように出力されるか。
ちなみにサーバからはレスポンスデータ（ボディ）は空を返す。

オリジナルのaxiosでは、公式サイトにも記載されているとおり、以下のようにレスポンスに対してアクセスが可能。

axios公式から抜粋

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

では、nuxt-module版axiosの場合は、空文字が出力される。つまり、何も出力されない。
挙動が違うのはなぜか。

これはここのソースの39行目に注目してほしい。

plugin.template.js

axiosExtra['$' + method] = function () { return this[method].apply(this, arguments).then(res => res && res.data) }

特にres => res && res.dataの部分。

これは、レスポンスのデータだけを返すことを意味する。
つまり、nuxt-module版のaxiosではデータ以外は取得できない。

ただし、onResponseハンドラでは取得が可能。

どうしても、ヘッダなどデータ以外を取得したい場合は、オリジナルのaxiosを使うか、nuxt-modules版のソースをいじるかになる。ソースをいじった場合は以下のようになる。

plugin.template.js（修正版）

axiosExtra['$' + method] = function () { return this[method].apply(this, arguments).then(res => res) }

上記のような対応を行わなくても、以下のような対応で取得が可能になる。

// HTTPメソッド部分の$をはずす
this.$axios.post(`/login`,formData)
  .then(response => {
    console.log(response)
  })
  .catch(e => {
    console.log(e)
  })