본문 바로가기

Error Notes

Uncaught (in promise) TypeError: Failed to fetch 이런 실수 내가 합니다.

반응형

수 많은 다양한 이유로부터 해당 에러가 발생하겠지만

이번에는 어이 없는 나의 실수를 기록해보자고 한다. 

몇일을 api에서 전송한 값을 못 받길래 이유가 무엇일까 고민하다가 

chat gpt에 문의를 하였다. 



에러 메시지는 `updatePost` 함수 안에서 `fetch`를 호출할 때 발생하는 것 같습니다. `fetch`가 성공적으로 API를 호출하지 못하고 있어서 에러가 발생한 것 같습니다.

에러의 원인을 찾아보기 위해 다음과 같은 질문들을 생각해볼 수 있습니다.

1. `fetch` 호출에서 API 주소(`http://localhost:4000/post`)가 올바른가요?
2. 호출하는 API의 HTTP 메서드는 `PUT`인가요?
3. `updatePost` 함수가 호출될 때, 해당 게시물의 ID 값은 `id` 변수를 통해 제대로 전달되고 있나요?
4. 서버에서 `uploadMiddleware` 미들웨어를 사용하여 파일 업로드를 처리할 때, `req`와 `res` 파라미터를 올바르게 사용하고 있나요?

우선 첫 번째로, `fetch` 호출의 주소를 수정하겠습니다. 수정된 `fetch` 호출을 다음과 같이 작성할 수 있습니다.


await fetch(`http://localhost:4000/post/${id}`, {
  method: 'PUT',
  body: data,
});



두 번째로, 서버에서 파일 업로드를 처리할 때 `req`와 `res` 파라미터의 순서를 바꾸겠습니다. 수정된 서버 코드를 다음과 같이 작성할 수 있습니다.


app.put('/post', uploadMiddleware.single('file'), async (req, res) => {
  res.json(req.file)
});



핵심은 

app.put('/post', uploadMiddleware.single('file'), async (res, req)

내가 이와 같이 잘못 코드를 짜서 생긴문제이다.

req , res 순서를 지켜주어야 fetch 문법으로 부터 data 전송을 잘 받을 수 있다.

반응형