私のスキル

WEBデザイナー。元Wordpress専門エンジニア
Vue.jsを勉強中。(PHPのようにHTMLの中に変数を組み込めるので。)
環境構築が億劫な人間なので、Node.jsは使わずにCDNを使っちゃう。

開発環境

microCMS
国産で、編集画面がWordpressのクラシックエディタに似ているので、一番受け入れやすそう。
Vue.js
HTMLに直接タグを書いてJavascriptを挿入できるのが便利なので使っています。
axios
Node.jsのパッケージの一つ。axiosを使わなくてもできるけど、シンプルに書けるのが利点。

ちなみVue CLIを使わず、CDNで読み込ませています。

詰まったところ

microCMSのAPIは「APIプレビュー」で出てくるURLをそのまま表示させても動きません。
なぜならAPIキーをヘッダーに含める必要があるからです。

ということでmicrocms axiosと検索をかけて、ヘッダーに含めるやり方を実践。
しかし、動かない。401エラー。

動かない書き方

...
},
mounted(){
    axios.get(this.url, {
        headers: { 'X-API-KEY': this.apikey },
    })
    .then(
        response =>　console.log(response)
    )
    .catch(error => console.log(error))
},
...

headerの書き方には間違いはなさそう。
401エラーはAPIが違うことが多いらしいが、何度みても一致している。

原因が分からずに調べていると、APIがリニューアルされた公式ブログを発見。

私は知識がなかったので、
これを読んでも「なんのこと？」とはてなマークを浮かべていました。

試行錯誤していくうちにようやく判明。

X-API-KEYをX-MICROCMS-API-KEYに変更するだけでした！！

実際に動いた書き方

...
},
mounted(){
    axios.get(this.url, {
        headers: { 'X-MICROCMS-API-KEY': this.apikey },
    })
    .then(
        response =>　console.log(response)
    )
    .catch(error => console.log(error))
},
...

これで、やっと表示される様になりました！！！！