[🐾일지] Axios get 401 Unauthorized ERROR (Request failed with status code 401)

 

아주 간단한 오류로 대략 72시간을 날린 사람? 

나다 tlqjfxod....

오늘부터 공식 바보로 명명하겠,,,

머리가 똑똑해야해...

---

하루라도 오류가 안나면 가시가 돋는 내 콘솔. 두구두구두구 오늘의 오류는?

로그인 쿠키 관련 get 401번 에러..ㅎ

 

Flow 는 다음과 같다

 

1️⃣ [로그인 화면] 로그인(POST) -> {success: true, token: '...', email: '...'} 반환
2️⃣ [홈 화면] Auth 가져오기(GET) -> {유저 정보} 반환 -> 유저 정보 이용
3️⃣ [홈 화면] 로그아웃(GET)

 

맨 처음에는 react-cookie 라이브러리를 이용해서 로그인 시에 반환된 token을 쿠키에 저장한 후 쓰려고 했다. 

저번 프로젝트에서는 그렇게 했기 때문이다.

쿠키에 저장한 토큰을 get headers Authorization 에 담아 요청을 가져오려고 했는데 문제가 나타났다.

 

 

 

 

 

 

1. setCookie('access_token', token) 설정 후 리랜더링이 어떤 이유에서인지 안됨...

200번 성공을 반환받았을 때에 setCookie에 token을 저장하면 cookie 값이 렌더링되고 useEffect가 실행되어 console창에 cookie 로그가 찍혀야 했지만... cookie 값이 바뀌지 않았다. 하지만, navigate로 이동한 홈 화면에서는 업데이트된 cookie 값이 제대로 찍혔고 그 값을 Authorization에 넣어서 GET 요청을 보냈지만, 저 망할놈의 401번 에러만 계속 나타났다. 

 

const [cookie, setCookie] = useCookies(['access_token']);

useEffect(()=>{
 	console.log(cookie)
},[cookie])
 
 const handleButton = async () => {
        const userData = {
            email: user.email,
            pw: user.pw,
        };

        await API.post('/user/login', userData, {
            withCredentials: true,
        })
            .then(async (res) => {
                console.log('>>> [LOGIN] ✅ SUCCESS', res.data.email);
                if (res.status === 200) {
                	const userData = await res.data;
                    setCookie('access_token',userData);
                    navigate('/home');
                }
            })
            .catch((err) => {
                console.warn('>>> [LOGIN] ❌ ERROR', err.message);
                if (err.response.status === 404) {
                    setErrorMsg({
                        ...errorMsg,
                        email: '존재하지 않는 이메일입니다.',
                    });
                } else if (err.response.status === 401) {
                    setErrorMsg({
                        ...errorMsg,
                        pw: '비밀번호가 올바르지 않습니다.',
                    });
                } else if (err.response.status === 400) {
                    setErrorMsg({
                        ...errorMsg,
                        email: '올바르지 않은 이메일 형식입니다.',
                    });
                } else if (err.response.status === 403) {
                    alert('인증을 안 한 유저');
                }
            });
    };

 

망할놈의 401번 에러

 

 

 

 

 

 

 

2. 백엔드 분이랑 소통

하도 안 되서 결국 SOS를 쳤는데 띠용...header에 아무것도 넣어 보내지 말라고 했다.

그래서 아무것도 안 넣어서 보냈는데 여전한 401번 에러.

하지만, swagger는 제대로 작동이 되었다. 그러면...더욱 더 깊어지는 고민...뭐가 문제일까...

 

useEffect(() => {
        const getAuth = async () => {
            await API.get('/user/auth', {
                withCredentials: true,
            })
                .then((res) => console.log('>>> [HOME] ✅ SUCCESS', res.data))
                .catch((err) =>
                    console.log('>>> [HOME] ❌ ERROR', err.message),
                );
        };
        getAuth();
    }, []);

 

고민하다가 두 번째 인자에 withCredentials: true 를 넣어서 보냈더니

 

? 된다?

 

놀랍게도 정신을 차려버린 코드...물론 저번 포스트처럼 서버 코드에도 credentials 설정이 되어 있어야 한다.

이렇게 허무하게 해결했다는...

단, 로그인 POST 를 보낼 때에도, auth를 받을 때에도, logout을 할 때에도 모두 있어야 한다.

 

 

 

 

 

 

 

[결론]

의사소통을 잘 하자^^ ( + { withCredentials: true } )

 

팀워크 야훗