fetch API 사용 시 headers가 비어있음

 

 

 

 

 로그인 시 헤더에 담긴 Access-token을 받아와야 하는데 headers 가 불러와지지 않는 오류가 생겼다.

const loginHandler = useCallback(async () => {
    try {
        const response: any = await fetch(Account.POST_SNS_LOGIN, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                code: authCode,
                snsCode: "1110501",
                phoneNumber: phone,
                name: name,
            }),
        });

        const data = await response.json();
        console.log(data);

        // if (response.ok) {
        // 	// 성공하면 홈으로 리다이렉트
        // 	router.push("/");
        // } else {
        // 	// 실패하면 에러 페이지로 리다이렉트
        // }
    } catch (error) {
        console.error(error);
    }
}, [router, authCode, phone, name]);

 

네트워크 탭에서 살펴보니 서버에선 잘 보내주고 있는데 받질 못하고 있는거였음

 

그냥 별 생각 없이 fetch를 사용했는데, 

검색해보니 fetch에서 종종 이런 오류가 발생한다고 하더라.

그래서 axios로 바꿔 주었다

 

 

👻 해결

1. Axios

const loginHandler = useCallback(async () => {
    try {
        const response = await axios.post(
            Account.POST_SNS_LOGIN,
            {
                code: authCode,
                snsCode: "1110501",
                phoneNumber: phone,
                name: name,
            },
            {
                headers: {
                    "Content-Type": "application/json",
                },
            }
        );

        console.log(response);

        // if (response.ok) {
        // 	// 성공하면 홈으로 리다이렉트
        // 	router.push("/");
        // } else {
        // 	// 실패하면 에러 페이지로 리다이렉트
        // }
    } catch (error) {
        console.error(error);
    }
}, [router, authCode, phone, name]);

 

 

axios로 바꾼후 확인해보니 잘 불러오는 것을 확인할 수 있었다 ㅜㅜ

 

 

2. useMutation

const { mutate: loginMutate } = useMutation(
		async () => {
			const response = await axios.post(Account.POST_SNS_LOGIN, {
				code: authCode,
				snsCode: "1110501",
				phoneNumber: phone,
				name: name,
			});
			return response;
		},
		{
			onSuccess: (response: any) => {
				const data = response.data;
				const headers = response.headers;
				console.log(data, headers);
				// router.push("/user/work/list");
			},
			onError: (error) => {
				console.error(error);
			},
		}
	);

 

react query인 useMutation으로 마무리했당

이도 마찬가지로 headers를 아주 잘~ 불러왔음!

fetch는 사용을 지양해야할까? ㅜㅜ

 

 

https://developer.mozilla.org/en-US/docs/Web/API/Headers

Headers - Web APIs | MDN

https://stackoverflow.com/questions/48413050/missing-headers-in-fetch-response

Missing headers in Fetch response