도메인을 연결하고 앱 출시 전 간단하게 테스트를 했다.

어쩔 땐 댓글이 수정 가능하고 어쩔 땐 수정이 안된다.

이게 무슨 일인가 다른 기능들은 정상적으로 작동을 하고 있었기 때문에 머리가 아파왔다.

폼데이터의 문제인가? 확인을 위해 로그를 확인해봤다.

JSON 파싱 에러가 나고 있다.

 LOG  fetchWithRetry options: 
 {"_parts": [["data", "{\\"accessibilityRating\\":5,\\"facilityRating\\":5,\\"cleanlinessRating\\":5,\\"visitTime\\":\\"EVENING\\",\\"description\\":\\"1\\",\\"imageUrls\\":[]}"], ["images", [Object]]]}

하지만 폼 데이터를 확인해 보면 정상적으로 담아져 있었다.

문제는 서버 로그엔 요청 자체가 오고 있지 않았고, 로컬에서 테스트를 할 땐 정상적으로 작동하고 있었다. 폼 데이터는 문제가 없었다….

그렇다면 API쪽에서 문제가 발생하고 있는 것 같았다.

  const response = await fetch(url, {
    ...options,
    headers,
  });

이 코드는 백엔드로 API를 보내기 위한 fetch 코드다. 여기에서 응답을 확인해보았다.

{"_bodyBlob": {"_data": {"__collector": [Object], "blobId": "2fd6a07a-1094-4843-8430-7ef8bb119f75", "offset": 0, "size": 192}}, "_bodyInit": {"_data": {"__collector": [Object], "blobId": "2fd6a07a-1094-4843-8430-7ef8bb119f75", "offset": 0, 
"size": 192}}, "bodyUsed": false, "headers": {"map": {"connection": "close", "content-length": "192", "content-type": "text/html", "date": "Fri, 17 May 2024 13:21:11 GMT", "server": "nginx/1.24.0 (Ubuntu)"}}, "ok": false, "status": 413, "statusText": "", "type": "default", "url": "도메인"}

확인해 보니 status 413을 반환하고 있었다.

413코드는 Request Entity Too Large는 즉 서버가 허용한 Request의 크기 보다 큰 파일을 클라이언트에서 전송을 했기 때문에 발생하는 에러이다.