質問編集履歴
2
調査結果の追記
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[Next.js]
|
|
1
|
+
[Next.js] バックエンド側のAPI取得時にCORSエラーでfetch失敗する。
|
test
CHANGED
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
Next.jで自作アプリを作っています。（Next.jsは初心者です。）
|
|
3
|
-
PropsやStateの仕組みを少し理解できたと思うところでリストを作ろうとしていますがうまくいきません。
|
|
3
|
+
PropsやStateの仕組みを少し理解できたと思うところでリストを作ろうとしていますがうまくいきません。サーバーサイド言語とフロントを別々にして作っていて、fetch関数でサーバーからのデータを取得していますが、fetch関数実行時に「TypeError: Failed to fetch」のエラーがでて失敗します。
|
|
4
4
|
|
|
5
|
-
作ろうとしているリストは、一番下に"さらに表示"ボタンのようなボタンがあり、それを押すごとにN個ずつ外部から続きのリストデータを取得してきて、後ろに追加していき縦に長くなっていくようなものです。
|
|
5
|
+
作ろうとしているリストは、一番下に"さらに表示"ボタンのようなボタンがあり、それを押すごとにN個ずつ外部から続きのリストデよータを取得してきて、後ろに追加していき縦に長くなっていくようなものです。
|
|
6
6
|
|
|
7
7
|
実装的な構想としては、コンポーネントが呼ばれたらリストのデータをfetchしてきて、それをuseState()で監視させ、リストの更新時には再度fetchしてきて既存のリストデータと合体させるような形で更新していくような作りを想定しています。（この作成方針で絶対実現したいとかではなく、自分の技術レベルの範囲内で実現方法を考えた結果たどり着いた方法です。）
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
**9/21 8:00追記**
|
|
10
|
+
ブラウザのコンソールを見ると、画像のようなエラーが出ていて、これを調べたらCORSエラーというエラーが原因となっているようでした。
|
|
11
|
+
|
|
12
|
+
解消方法を調べてみたところ、通信時のhttpヘッダにアクセスを許可するような修正が必要との様子だったので[こちら](https://zenn.dev/ako/articles/e91075b08da785)を参考にfetch関数を後述の通り修正を加えました。
|
|
13
|
+
ですが変わらず、コンソール上でエラー出ています。
|
|
14
|
+
解消方法をご存じの方いたらよろしくお願いしまします。
|
|
10
15
|
|
|
11
16
|
|
|
12
17
|
|
|
@@ -75,12 +80,28 @@
|
|
|
75
80
|
|
|
76
81
|
```
|
|
77
82
|
|
|
83
|
+
9/21 8:00追記
|
|
84
|
+
修正したfetchのソース
|
|
85
|
+
```
|
|
86
|
+
const res = await fetch(`http://localhost:3000/top?XXXXXXX=${XXXXXXXX}`, {
|
|
87
|
+
headers: {
|
|
88
|
+
"Access-Control-Allow-Origin": "*",
|
|
89
|
+
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
|
|
90
|
+
"Access-Control-Allow-Headers": "Content-Type, Authorization",
|
|
91
|
+
},
|
|
92
|
+
method: 'GET',
|
|
93
|
+
cache: 'no-store',
|
|
94
|
+
});
|
|
95
|
+
const result = await res.json();
|
|
96
|
+
```
|
|
97
|
+
|
|
78
98
|
### 試したこと・調べたこと
|
|
79
99
|
- [x] teratailやGoogle等で検索した
|
|
80
100
|
- [x] ソースコードを自分なりに変更した
|
|
81
101
|
- [ ] 知人に聞いた
|
|
82
102
|
- [ ] その他
|
|
83
103
|
|
|
104
|
+
|
|
84
105
|
##### 上記の詳細・結果
|
|
85
106
|
|
|
86
107
|
|
1
ソースコード修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -21,7 +21,6 @@
|
|
|
21
21
|
### 該当のソースコード
|
|
22
22
|
|
|
23
23
|
```
|
|
24
|
-
|
|
25
24
|
"use client";
|
|
26
25
|
import { useEffect, useState } from 'react';
|
|
27
26
|
import { fetchUser } from '@/lib/getter';
|
|
@@ -58,7 +57,6 @@
|
|
|
58
57
|
```
|
|
59
58
|
|
|
60
59
|
```
|
|
61
|
-
|
|
62
60
|
////以下のような構造でリストデータを作り、userListで監視させようとしています。
|
|
63
61
|
|
|
64
62
|
listData: [
|