🎅

AxiosからだとHeaders要素にアクセスできるものが限られる

2023/12/24に公開

fetch

axios

tech

APIから何かをfetchしたいときに、そのbodyだけではなくheadersにアクセスしたいことはよくあるかと思います。

一番よくある例はContent-Typeとかですよね
他にもContent-Lengthなんかもローディング状況を計算するときなんかに使ったりします

今回は、APIのレスポンスが返される時間であるDateを取得しようとしました。が、その時につまづきまくったので、その内容を書いていこうと思います 😱

Access-Control-Expose-Headersをレスポンスのヘッダーにつけないとブラウザからアクセスできない

MDNの記事にもあるように、Access-Control-Expose-Headersをつけないと、JavaScriptからそもそもHeadresの要素のアクセスできないことがわかりました。指定しないとデフォルト（Content-Typeとか）しかアクセスできないようです。今回はAccess-Control-Expose-Headersにはワイルドカードを指定しました。

この時は、標準のfetchを使っている場合は問題なくheadersにアクセスすることができます。

sample

fetch('hogehoge')
  .then((res) => console.log(res.headers.get('Date'))); //headersのdateが取れる

しかし、axiosだとこれがうまくいかない

fetchだったらうまくいったからaxiosでもうまく行くやろ！と思った矢先、axiosだと全然うまくいかない、、、

sample

axios.get('hogehoge')
  .then((res) => {
    console.log(res.headers['content-type']); // 取れる 😊
    console.log(res.headers['date']); // 取れない 🤮
  })

なんでぇ、、、

axiosの実装コードを見ると、Headersの実装の中にそれっぽいやつが、、、

axios側でアクセスできるやつはこれだよと指定しているみたいですね、、、

なので、axiosからheadersを色々触ろうとするのはやめて、APIレスポンスに含めてもらうようにするのが一番の解決策ですね。そもそもあまり触るべきではなさそうなので、ごにょごにょいじるのもあまりよくないかなと

stackoverflowでも同じような会話がされていそうでした。

もしかしたらワイルドカードではなく、ちゃんと指定してあげればいけるのかも？
この辺りはaxiosの実装をちゃんと見ないとなんとも言えないですね、時間がなくそこまでは試せず、、、
また時間がある時に試してみるかもしれないです🙇‍♂️

Access-Control-Expose-Headersをレスポンスのヘッダーにつけないとブラウザからアクセスできない

しかし、axiosだとこれがうまくいかない

Discussion