meetup.service.ts:111 Uncaught (in promise) TypeError: Failed to execute 'json' on 'Response': body stream already read at getMeetupPresignedUrl (meetup.service.ts:111:25)
export const getMeetupPresignedUrl = async () => {
const token = Cookies.get("accessToken"); const response = await fetch(${BASE_URL}/api/v1/meetup/presigned-url?filetype=image/jpg, {
method: "GET",
headers: {
Authorization: Bearer ${token},
"Content-Type": "application/json",
},
});
if (!response.ok) {
throw new Error("Presigned URL ㅇ청 실패");
}
const data = await response.json();
console.log("🟣🟣🟣프리사인드 응답 데이터:", data); return await response.json();
};근데 이렇게 치면 오류 나거든. 니가 알려준 코드로 치면 응답이 명세서대로 잘 오고. 뭔 차이야? data 변수에 담아서 콘솔 찍고, 리턴값은 그냥 data 변수에 안 담은 값을 바로 리턴할 뿐이지 같은 값 아냐?편집아니요, 완전히 다릅니다!
문제는 response.json()을 두 번 호출해서입니다.
javascriptconst data = await response.json(); // 1번째 호출 - body 읽음
console.log("🟣🟣🟣프리사인드 응답 데이터:", data);
return await response.json(); // 2번째 호출 - ❌ 에러!
HTTP Response의 body는 스트림이라서 한 번만 읽을 수 있습니다.
1번째 response.json()에서 이미 body를 다 읽어버렸기 때문에
2번째 response.json()을 호출하면 "이미 읽힌 스트림" 에러가 발생합니다.
올바른 방법:
javascriptconst data = await response.json(); // 한 번만 읽고
console.log("🟣🟣🟣프리사인드 응답 데이터:", data);
return data; // 읽은 데이터를 반환
또는:
javascript// 바로 반환하면서 콘솔 찍기
const data = await response.json();
console.log("🟣🟣🟣프리사인드 응답 데이터:", data);
return data;
절대 하면 안 되는 것:
javascriptawait response.json(); // 1번째
return await response.json(); // 2번째 - 에러 발생!
그래서 bodyUsed: true가 표시된 것입니다. 이미 body가 사용(읽힘)되었다는 뜻이에요.
