setCookie 질문입니다.

Question

안녕하십니까 제로초님 질문이 있어 글을 올립니다. 현재 next.js를 이용하여 localhost:3000 포트를 이용해 front를 진행하고 있고, back은 제로초님의 강의를 이용하여 localhost:8001 포트로 서버를 만들어 진행하고 있습니다.   그러다, express passport 로그인 후 setCookie로 쿠키에 값을 저장하는 과정에서, front 서버 localhost:3000 포트에서는 네트워크 탭에는 위와 같이 Set-Cookie로 명시 되어 있으나, 애플리케이션 탭의 쿠키에는 저장이 되지 않았습니다.   그래서 postman으로 실험을 해본 결과 postman에서는 정상적으로 쿠키가 저장된 모습을 확인할 수 있었습니다.   때문에 이와 같은 경우를 계속 찾아보고, 검색을 해보았는데, 브라우저의 쿠키 정책에 따라, 서로 다른 도메인 간에는 쿠키를 공유할 수 없습니다. 이를 해결하기 위해서는 서버에서 쿠키를 설정할 때 samesite 옵션을 none으로 설정 후 https 를 이용해 통신해야 한다고 나왔었습니다.   위와 같은 설명 때문에 localhost:300 0 에서는 쿠키값이 저장이 안 된 것이 맞는 지 궁금합니다.

hyoloui · Answer

Set-Cookie는 백엔드 서버에서 붙여주는 쿠키이기 때문에 next.js 를 통해 서버 통신을 했다면 브라우저에 붙어있지 않고, 프론트엔드 서버(next.js 서버)와 통신할 때 사용되었을 겁니다 이것을 가지고 브라우저에 붙이려면 세팅을 따로 해주셔야 합니다 말씀하신 백엔드 서버 port:8001 와 port:3000 브라우저(클라이언트) 가 직접 소통하는 것 이 아닌, next.js 에서는 next.js server 에서 port:8001 로 소통하는 것이기 때문입니다. port:8001 -> next.js server 백엔드 서버에 요청 후 결과값 받아옴 next.js server -> port:3001 받아온 결과값으로 html 렌더링(SSR) 그래서 postman 에서 요청에서는 Set-Cookie가 있지만 next.js 에서는 서버가 중간에 있기 때문에 쿠키를 따로 set 해줘야 하는 것입니다.   let setCookie = authResponse.headers.get('Set-Cookie'); console.log('set-cookie', setCookie); if (setCookie) { const parsed = cookie.parse(setCookie); cookies().set('connect.sid', parsed['connect.sid'], parsed); // 브라우저에 쿠키를 심어주는 것 } 참조 : https://github.com/ZeroCho/next-app-router-z/blob/master/ch4/src/auth.ts#L56

김무연 · Answer

아 해결했습니다.. 바보같이 프론트단에서 axios 로 요청을 날릴때 withCredentials를 true로 설정을 안해줬었습니다...

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 질문하신 내용과 유사한 상황에 대한 답변을 찾아드리겠습니다. 찾아본 결과, 서로 다른 도메인에서 쿠키가 저장되지 않는 문제와 관련하여 강사님께서 답변해주신 내용이 있습니다. 해당 답변은 다른 도메인 간 쿠키 전송 문제와 관련된 것으로, Set-Cookie 헤더 설정 시 domain, SameSite 등의 옵션 설정에 대한 내용입니다. 아래 링크에서 강사님의 답변을 확인하실 수 있습니다. 게시글 제목: 쿠키가 저장이 안됩니다 ㅠㅠ 게시글 제목: Application > Cookies 에 front에만 저장이 안 돼요&hellip; 게시글 제목: 안녕하세요 제로초님 해당 내용을 참고하시어 문제를 해결해보시길 바랍니다.