😸

Micro-CMS APIでgetするのに苦戦した話

1 min read

はじめに

NuxtでSSG+microCMSで簡易ポートフォーリオを作りたいと思い、言語はTypeScriptで実践。

環境

  • nuxt
  • npm
  • microCMS
  • microcms-lib

以下のサイトはyarnですが、ほとんど同じなので参考にしました。
ただmicrocms-typescriptコマンドを叩けなかったので、"node_modules/microcms-typescript 〜 "で叩き直した。

https://zenn.dev/sora_kumo/articles/2876c8f98eca56

公式

https://www.npmjs.com/package/microcms-lib

microcms-libをインストールすると、APIリクエストや取得データの型定義などを自動で行ってくれる為、すごく楽だなと思い、導入しました。(型定義ファイルさえ自作できれば、正直axiosでも良い)

問題=getでデータを取得できない(401)

import { MicroCMS } from "microcms-lib";
import { EndPoints } from "../types/cms-types";

// CMSとの接続設定
const cms = new MicroCMS<EndPoints>({
  service: process.env.SERVICE!,
  apiKey: process.env.APIKEY,
  // apiWriteKey: process.env.APIKEY_WRITE,
  // apiGlobalKey: process.env.APIKEY_GLOBAL
});

@Component
export default class Article extends Vue {
  // ページ生成時にCMSから記事一覧を取得
  created() {
    const getArticle = async () => {
      const returnData = await cms.gets("get_articles", {
        limit: 10000,
        fields: ["id", "title"],
        orders: "createdAt"
      });
      console.log(returnData);
      return returnData;
    };
    getArticle();
  }
}

401=「認証がうまくいっていない」

curlでうまくいくか確認

curl -X GET [url]  -H  'X-API-KEY:[key]'
"message":"X-MICROCMS-API-KEY header is invalid."}% → 失敗
curl -X GET [url]  -H  'X-MICROCMS-API-KEY:[key]'
→ 成功!!

どういうことか?

認証キーのリクエストヘッダーがX-API-KEYからX-MICROCMS-API-KEYに変更されたらしい。

https://document.microcms.io/content-api/x-microcms-api-key

解決策

node_modules/microcms-lib/dist/index.jsを改変してやった。
「X-API-KEY」と検索して該当箇所を全て「X-MICROCMS-API-KEY」に変更。(4〜6箇所あった)

結果的には解決したが、package.jsonでインストールし直した時に元に戻る為、node_modulesモジュールを直接変更するのは良くない。なのでaxiosで実装した方がよかった。
結局遠回りだったけどまあいいか。

Discussion

ログインするとコメントできます