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