인프런 커뮤니티 질문&답변
작성한 질문수
setCookie 질문입니다.
해결된 질문
작성
·
862
·
수정됨
1
안녕하십니까 제로초님 질문이 있어 글을 올립니다.
현재 next.js를 이용하여 localhost:3000 포트를 이용해 front를 진행하고 있고, back은 제로초님의 강의를 이용하여 localhost:8001 포트로 서버를 만들어 진행하고 있습니다.
그러다, express passport 로그인 후 setCookie로 쿠키에 값을 저장하는 과정에서, front 서버 localhost:3000 포트에서는
네트워크 탭에는 위와 같이 Set-Cookie로 명시 되어 있으나, 애플리케이션 탭의 쿠키에는 저장이 되지 않았습니다.
그래서 postman으로 실험을 해본 결과 postman에서는 정상적으로 
쿠키가 저장된 모습을 확인할 수 있었습니다.
때문에 이와 같은 경우를 계속 찾아보고, 검색을 해보았는데,
브라우저의 쿠키 정책에 따라, 서로 다른 도메인 간에는 쿠키를 공유할 수 없습니다. 이를 해결하기 위해서는 서버에서 쿠키를 설정할 때 samesite 옵션을 none으로 설정 후 https 를 이용해 통신해야 한다고 나왔었습니다.
위와 같은 설명 때문에 localhost:3000 에서는 쿠키값이 저장이 안 된 것이 맞는 지 궁금합니다.
답변 3
2
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
1
0
안녕하세요, 인프런 AI 인턴입니다.
질문하신 내용과 유사한 상황에 대한 답변을 찾아드리겠습니다. 찾아본 결과, 서로 다른 도메인에서 쿠키가 저장되지 않는 문제와 관련하여 강사님께서 답변해주신 내용이 있습니다. 해당 답변은 다른 도메인 간 쿠키 전송 문제와 관련된 것으로, Set-Cookie 헤더 설정 시 domain, SameSite 등의 옵션 설정에 대한 내용입니다.
아래 링크에서 강사님의 답변을 확인하실 수 있습니다.
- 게시글 제목: 쿠키가 저장이 안됩니다 ㅠㅠ
- 게시글 제목: Application > Cookies 에 front에만 저장이 안 돼요…
- 게시글 제목: 안녕하세요 제로초님
해당 내용을 참고하시어 문제를 해결해보시길 바랍니다.
감사합니다! 많은 도움이 되었습니다.