Passport의 deserializeUser가 실행이 안될 때 _ Error: Request failed with status code 401 (Unauthorized)

서버 라우터 설정 중 뜬오류.

로그인은 정상적으로 되는데 로그아웃이 안된다.

 

 

Unauthorized라고 있는걸 봐서는 isAuthenticated()을 사용한미들웨어 문제인가 싶었다.

** isAuthenticated는 HTTP Request의 속성으로 boolean값을 가진다.

 

그래서 미들웨어 적용없이 로그아웃을 다시한번 실행해봤다.

그랬더니 서버쪽 에러가 떴다.

req.user을 콘솔로 찍어보니 undefined.

 

유저정보를 못받아오나?

다시 미들웨어를 넣어주고, 미들웨어 실패했을 때 req.isAuthenticated 값을 콘솔로 나오도록하고,

로그인 후 유저정보를 전달해주는 deserializedUser에 콘솔을 넣고 실행해봤다.

서버실행-로그인-로그아웃(실패)

로그인 시, passport의 serializeUser가 실행되면서 콘솔에 찍혔다.

로그아웃 실행시 deserializeUser가 실행되지않고(콘솔에 없음)

isLoggedIn 미들웨어에서 오류가 난 것을 볼 수 있다.

오류가 발생했고, isAuthenticated 값은 false다.

 

즉 deserializeUser가 실행이 안됐다.

 

 

---

 

인터넷 서칭결과

deserializeUser가 안되는 이유는 크게 두가지이다.

CORS오류나 cookie 설정.

 

1. CORS

는 저번 포스트에서 다뤘으니 넘어가자.

Express :: cors_서버에서 CORS 에러 해결하기

2.  secure: false 설정하기

개발자모드에서는 cookie의 secure: false로 해주자.

 

---

하지만 내 문제는 이게 아니었음.

 

어쨌든 쿠키문제이고 CORS도 설정해줘야하는 부분이니 저 범주내의 문제는 맞다.

인터넷에서 찾은 해결방법이랑 일치하지 않을뿐.

 

3. withCredentials 설정하기 

백엔드와 프론트엔드 주소가 달라서 생기는 쿠키문제였다.

같은 origin인 경우 자동으로 cookie가 추가되지만, 다른 경우 문제가 발생한다.

Network에서 ResponseHeader에는 cookie가 있지만,

개발자도구에서 직접 Cookie를 확인해보면 쿠키가 없다.

 

이럴때는 프론트에서 ajax 요청을 보낼 때, withCredentials: true를 해주어야한다.

  axios.post(주소, 데이터, { withCredentials: true });  

만약 데이터가 없다면 그 자리는 null을 넣어주어 매개변수 위치를 지켜주어야한다.

그리고 백엔드에서도 cors설정에서, credentials: true를 해주어야한다.

 

이런식으로...

 

 

모든 ajax요청에 withCredentials를 적어주기가 귀찮으면,

  axios.defaults.withCredentials = true;  

이렇게 설정해주면 하나하나 적어줄 필요가 없다.