「ヘッドレスCMS」というものを利用したくてmicroCMSを使ってみましたが、
１箇所だけ詰まったところがあったので、Qiitaに残しておきます。
ある程度の経験者ならすぐに分かることは無いと思いますが、
初心者なら確認するのに時間がかかりそうな内容でした。
私のスキル
- 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))
},
...
これで、やっと表示される様になりました！！！！