Backend -> Frontend로 쿠키 보내기(with Token)

상황

 

쿠키에 토큰 값을 담아 백엔드 코드에서 res.cookies를 이용해 프론트엔드로 쿠키를 보내려는데 프론트엔드에서 cookie 값이 확인되지 않는 상황이 발생했다.

여러 블로그들을 확인해보며 set cookie, get cookie등 쿠키를 보내고 받는 여러가지 방법들이 있었지만 왜인지 적용이 안되는 상황이었다.

 

 

 

해결

 

일반적으로,
(backend) res.cookies => (middleware) cookie-parser => (frontend) req.cookie 의 과정을 통해 req.cookie에 쿠키 값이 확인된다. 하지만 이런 과정으로만 쿠키를 보내게 되면 req.cookie에 쿠키 값이 들어가지 않는 것을 확인할 수 있다.

 

현재,

(backend) cookie => CORS 설정 => (frontend) cookie 로 넘어가는 구조인데 fetch 함수를 사용해서 교신할 때 백엔드에서 프론트엔드로 쿠키를 넘기려면 CORS 옵션 설정을 추가해주어야 한다.

(서버와 프론트의 도메인이 다르기 때문에, fetch의 경우만 해당되는 것이고 axios에서는 다르다고 한다)

 

이 때 설정해주어야 하는 CORS option은 credentials 라는 옵션인데 frontend 코드와 backend 코드 모두 설정해주어야 하는 옵션이다.

 

frontend 부분에서는 credentials : "include" 옵션을 설정해주어야 하고, backend 부분에서는 credentials : true 옵션을 설정해주어야 한다.

 

추가적으로 코드 내에 있는 모든 주소를 127.0.0.1에서 localhost로 변경해주어야 한다. 

(서버를 켜서 들어갔을 때 도메인 주소 또한 127.0.0.1이 아닌 localhost로 변경해주어야 한다)