@nuxtjs/axiosでレスポンスヘッダが取得できない

はじめに

通常のaxiosライブラリならこの問題は起きません。
@nuxtjs/axiosで発生することを確認しています。
※バグ等ではなくそういった仕様です。

何が起きたか？

業務で@nuxtjs/axiosを使用して、APIから返ってきたレスポンスヘッダを
参照しようとしたらレスポンスヘッダ自体が存在しなかった話！！

console.logやNetworkのレスポンス情報を見たとき↓
data部分しかない？！

[
    {
        "id": 1,
        "dummy_name": "hoge",
        "zip": "0000000",
        "prefecture": "hoge県",
        "municipality": "hoge区hoge"
        "created_at": "2022-04-26",
        "updated_at": null
    }
]

↓えぇ。こんなやつが返ってくるんじゃんかったけ？！※一部省略

data: [{…}]
headers: {cache-control:…}, 
status: 200
statusText: "OK"

サーバー側がレスポンスをちゃんと返してないんじゃないかと思い、
サーバー側をデバックするも正常にレスポンスを返している模様。。。

色々ググっていると以下の記事を発見！
https://qiita.com/mr-hisa-child/items/bfce5efe82fb11db700b

まさかの@nuxtjs/axiosがいい感じに、レスポンスを整形している模様。
完全に盲点でした。よくコードを見ると、確かに＄プレフィックスがついている。

axios.$post(`${resource}/hoge`, params)

postの前についてる$プレフィックスをとると無事レスポンスヘッダを
参照することができました。
ちなみにheaderを参照する際は以下の書き方で参照できます。

const hoge = res.headers['アクセスしたいプロパティ名']

結論

レスポンスヘッダを参照することはあまりないと思いますが、tokenを埋め込む時は
使用するので@nuxtjs/axiosの扱いには注意してください！

参考