fetch API で POST したらエラー

4684 ワード
api React post JavaScript fetch JavaScript テキストリンク

Nest.jsで作ったAPIをReactからfetchしようとした時にエラーが出たので、その解決方法をメモします。

エラーの原因の結論は、データがうまく渡せていなかったからです。空で渡っていました。

エラー内容

実行したのは大体こんな感じです

App.tsx
async function addTodo() {
        const body = JSON.stringify({todo:todo,limit:limit})
        await fetch('http://localhost:3000/item',{
            method: 'POST',
            mode: 'cors',
            body: body,
        })
        .then(() =>{
            // 省略
        })
    }

POSTでfetchしたらエラーが出ました。

POST http://localhost:3000/item 400 (Bad Request)

原因

エラー内容をしっかりと見ていってわかったこと。

  • データが渡せていない(サーバー側で確認したら、空の配列になっていた)
  • サーバー側で「not null」のバリデーションを付けているため、空のデータに対してエラー

解決方法

ヘッダーにContent-Typeを指定して、Jsonであることを伝える事で解決

App.tsx
async function addTodo() {
        const body = JSON.stringify({todo:todo,limit:limit})
        await fetch('http://localhost:3000/item',{
            method: 'POST',
            mode: 'cors',
            body: body,
             // =====↓追加====
            headers:{'Content-Type': 'application/json'}
             // =====↑追加====
        })
        .then(() =>{
            // 省略
        })
    }

これで、データをサーバー側で受け取ることができました。
無事、エラーがなくなりました。

参考文献

Fetch の使用

【Linux高周波コマンド特集(20)】du