teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

動くコードの追加

2021/06/08 01:11

投稿

sashimi_suki_
sashimi_suki_

スコア12

title CHANGED
File without changes
body CHANGED
@@ -95,6 +95,7 @@
95
95
  今回の参考サイトを既存コードと合わせるような形に変更。
96
96
  この際Vueのデベロッパーツールで確認するとblogItemsがundifinedなので、asyncDataの引数指定記述などに問題がある可能性。
97
97
  ただエラーは出ていない。
98
+ 初回表示は401エラー、ページリロードするとコンテンツが表示される。
98
99
  ```
99
100
  <script>
100
101
  async asyncData({ params, $config }) {
@@ -109,4 +110,20 @@
109
110
  }
110
111
  },
111
112
  </script>
113
+ ```
114
+ こうすると問題なく動く。
115
+ ```
116
+ <script>
117
+ async asyncData({ params }) {
118
+ const blog = await axios.get(
119
+ `https://your-service-id.microcms.io/api/v1/blog//blog/${params.slug}`,
120
+ {
121
+ headers: { 'X-API-KEY': 'your-api-key' },
122
+ }
123
+ )
124
+ return {
125
+ blogItems: blog.data,
126
+ }
127
+ },
128
+ </script>
112
129
  ```

2

取得するjsonの構造に誤りがあったので修正、ただ症状は変わらず

2021/06/08 01:10

投稿

sashimi_suki_
sashimi_suki_

スコア12

title CHANGED
File without changes
body CHANGED
@@ -87,7 +87,7 @@
87
87
  }
88
88
  )
89
89
  return {
90
- blogItems: blog.data.contents,
90
+ blogItems: blog.data,
91
91
  }
92
92
  },
93
93
  </script>
@@ -105,7 +105,7 @@
105
105
  }
106
106
  )
107
107
  return {
108
- blogItems: blog.data.contents,
108
+ blogItems: blog.data,
109
109
  }
110
110
  },
111
111
  </script>

1

タイトルを少し詳細に、あと自分で調査してる内容の追記。

2021/06/08 01:08

投稿

sashimi_suki_
sashimi_suki_

スコア12

title CHANGED
@@ -1,1 +1,1 @@
1
- Nuxt.jsのルーティングで401エラーが発生します。
1
+ Nuxt.js/JAMstackサイトのルーティングで401エラーが発生します。
body CHANGED
@@ -71,4 +71,42 @@
71
71
  ```
72
72
 
73
73
  解決方法を教えていただけるとありがたいです。
74
- よろしくお願いいたします。
74
+ よろしくお願いいたします。
75
+
76
+
77
+ ===追記===
78
+ もともと別の資料を参考にしていたため、今回参考にしたサイトと若干記述が違う部分があるので確認のためにも追記。
79
+ 上が問題なく稼働している他ページでのasyncDataの記述。
80
+ ```
81
+ <script>
82
+ async asyncData({ $config }) {
83
+ const blog = await axios.get(
84
+ `${$config.apiUrl}/blog`,
85
+ {
86
+ headers: { 'X-API-KEY': $config.apiKey },
87
+ }
88
+ )
89
+ return {
90
+ blogItems: blog.data.contents,
91
+ }
92
+ },
93
+ </script>
94
+ ```
95
+ 今回の参考サイトを既存コードと合わせるような形に変更。
96
+ この際Vueのデベロッパーツールで確認するとblogItemsがundifinedなので、asyncDataの引数指定記述などに問題がある可能性。
97
+ ただエラーは出ていない。
98
+ ```
99
+ <script>
100
+ async asyncData({ params, $config }) {
101
+ const blog = await axios.get(
102
+ `${$config.apiUrl}/blog/${params.slug}`,
103
+ {
104
+ headers: { 'X-API-KEY': $config.apiKey },
105
+ }
106
+ )
107
+ return {
108
+ blogItems: blog.data.contents,
109
+ }
110
+ },
111
+ </script>
112
+ ```