강의

멘토링

로드맵

Inflearn brand logo image

인프런 커뮤니티 질문&답변

dsfsdf님의 프로필 이미지
dsfsdf

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

도메인 연결하기

쿠키 공유 질문이요

작성

·

887

0

제가 어디서부터 흐름이 끊겼는지 모르겠는데 우선 로컬에서 브라우저랑 백엔드서버가 쿠키공유를 할 때 origin이 서로 달라서 브라우저에서는 axios.defaults.withCredentials = true를 해주고 백엔드서버에서는 credentials: true 하고 origin: http://localhost:3060을해서 쿠키를 서로 공유했는데 배포 할 때도 백엔드서버에서 브라우저 ip주소를 origin에 적어주면 공유 되는 거 아닌가요? 왜 배포할 떄는 브라우저와 백엔드서버 origin이 서로 같아야 쿠키가 공유 되는 건가요?

답변 1

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

브라우저 ip 주소가 아니라 프론트 서버 origin입니다. 프론트 서버랑 백엔드 서버 오리진이 같아야 원활하게 쿠키 공유를 할 수 있고요. 강좌에서는 localhost로 port만 다르고 origin은 같아서 쉬웠다면, 배포 환경에서 아예 다른 도메인인 경우 쿠키 공유가 어렵습니다. 브라우저 보안 상 점점 더 어려워지는 추세입니다. 애초에 일반적인 서비스면 origin이 다를 이유가 없습니다. naver가 프론트 서버가 naver인데 백엔드 오리진은 naverback으로 할 일유가 없는 것처럼요.

dsfsdf님의 프로필 이미지
dsfsdf
질문자

답변 감사합니다

한가지만 더 여쭤볼게 있는데요

origin이 프로토콜+도메인+포트로 알고 있는데localhost:3060, localhost:3065로 포트가 서로다른데 어떻게 공유가 될 수 있었던건가요?

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

자, 다시 설명드리겠습니다. 지금 cors랑 cookie부분이랑 혼동하고 계신 것 같은데요. withCredentials랑 origin은 cors 설정이지 cookie 설정이 아닙니다. 물론 withCredentials는 true여야 cors 상황에서 쿠키가 전송됩니다.

cookie는 port를 신경쓰지 않습니다. localhost로 도메인이 같으니 전송이 되고요. 프론트랑 백 도메인이 다르면 SameSite: 'none' 설정과 https를 적용해야지만 전송됩니다.

dsfsdf님의 프로필 이미지
dsfsdf
질문자

와 감사합니다! 헷갈렸던 부분이였는데 해결됐어요

dsfsdf님의 프로필 이미지
dsfsdf

작성한 질문수

질문하기