Nuxt.jsでのcode 401エラー

前提・実現したいこと

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)

該当のソースコード

Vue
1<template>
2  <ul>
3    <li v-for="content in contents" :key="content.id">
4      <nuxt-link :to="`/${content.id}`">
5        {{ content.title }}
6      </nuxt-link>
7    </li>
8  </ul>
9</template>
10
11<script>
12import axios from 'axios'
13export default {
14  async asyncData () {
15    const { data } = await axios.get(
16      'https://<your-service-id>.microcms.io/api/v1/blog',
17      {
18        headers: { 'X-API-KEY': '<api-key>' }
19      }
20    )
21    return data
22  }
23}
24</script>
25