axiosを使用したHTTPリクエスト時に401エラーが出る件について

Question

お疲れ様です。
質問お願いします。

現在Next.js×microCMSでブログを作っているのですが、axiosを使用した下記のHTTPリクエストで401エラーが出る状態です。
（認証コードについてはenv.development.localに保存しています）

API_KEY='aaaaaaaaaaaaaaaaaaaaaaaa'（仮の`API-KEY`です）

const data = axios.get('https://〇〇.microcms.io/〇〇', {
    headers: {
        'Content-Type': 'application/json',
        "X-API-KEY": process.env.API_KEY,
    }
}).then(response => {
    console.log('status:', response.status);
    console.log('body:', response.data);
}).catch(error => {
    console.log('error:', error);
});

ただ、"X-API-KEY": "aaaaaaaaaaaaaaaaaaaaaaaa"のように直接API-KEYを入力するとエラーは出ません。

何が違うのか分からないので分かる方ご教授お願いします。

Comments

[退会済みユーザー]

Fiddler などのキャプチャツールを使って要求・応答をキャプチャして、うまくいく時といかない時の違いを調べるということはしましたか？

[nakatievent]

そういうツールがあるの初めて知りました。

少し調べてみます！

Answer 1

恐らく、401エラーとなっているように、process.env.API_KEYにAPI_KEYが代入されていませんでした。

なので、next.config.jsに下記の記述を追記しました。

const { API_KEY } = process.env;

module.exports = {
	env: {
		API_KEY
	}
}

すると、無事にAPIを取得することができました。

Answer 2

ひとつ気になったのは、

（認証コードについてはenv.development.localに保存しています）

とのことやけど、そのファイル名、頭にドットないやん、てゆう。参考 ➡ Next.jsの環境変数設定まとめ

Comments

[nakatievent]

すいません、自分の書き間違えです。

頭にドットついています????‍♂️