Nuxt.jsでのcode 401エラー

Question

前提・実現したいこと

Nuxt(3.3.0)でこちらを元に、
Nuxtで、microCMSからaxiosで、データ取得をしています。
（Hello,Nuxtは問題なく表示できました。多分axiosが原因です。）

発生している問題・エラーメッセージ

スクショを載せます。

コンソールのエラーも載せます。

 ERROR  Request failed with status code 401                                                                                                                                                       06:06:12

  at createError (node_modules/axios/lib/core/createError.js:16:15)
  at settle (node_modules/axios/lib/core/settle.js:17:12)
  at IncomingMessage.handleStreamEnd (node_modules/axios/lib/adapters/http.js:244:11)
  at IncomingMessage.emit (events.js:326:22)
  at IncomingMessage.EventEmitter.emit (domain.js:486:12)
  at endReadableNT (_stream_readable.js:1252:12)
  at processTicksAndRejections (internal/process/task_queues.js:80:21)

該当のソースコード

<template>
  <ul>
    <li v-for="content in contents" :key="content.id">
      <nuxt-link :to="`/${content.id}`">
        {{ content.title }}
      </nuxt-link>
    </li>
  </ul>
</template>

<script>
import axios from 'axios'
export default {
  async asyncData () {
    const { data } = await axios.get(
      'https://<your-service-id>.microcms.io/api/v1/blog',
      {
        headers: { 'X-API-KEY': '<api-key>' }
      }
    )
    return data
  }
}
</script>

試したこと

普通に、CURLでヘッダー情報を叩いたら、普通にmicroCMSの、データが返ってきます。

Answer 1

microCMSの中の人です！

401エラーは主にAPIキーが誤っているときに返却されるエラーです。
APIキーに余計な文字が含まれていないか、不足がないかあたりをまずはご確認いただくと良いと思います。

Comments

[programming-go]

ありがとうございます！！