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

tamo님의 프로필 이미지

작성한 질문수

Slack 클론 코딩[실시간 채팅 with React]

swr 사용하기(쿠키 공유하기)

users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.

24.03.28 21:29 작성

·

156

0

users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.

강의 중간에 proxy 설정은 로컬에서 개발을 진행할때 설정을 한다고 말씀을 해주셨는데
webpack.config에 proxy 설정을 하고 credential true 설정후 /api/users 와 /api/users/login으로 요청하면 users 요청 안에 쿠키가 담기는데

proxy 설정을 주석 처리하고

프론트 서버 3090 에서 백 서버 3095로 직접 요청을 하는 풀 도메인 경로를 다 작성해서 요청을 하면 users에 쿠키가 안담기는데 이유가 있을까요??

application 탭에는 쿠키가 생성 되어있습니다.

 

 

[제로초 강좌 질문 필독 사항입니다]
질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.
도움이 되는 질문을 하는 방법을 알려드립니다.

https://www.youtube.com/watch?v=PUKOWrOuC0c

0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.
1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.
2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.
3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.
4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.
5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.
6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.

답변 2

0

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

2024. 03. 29. 01:15

네트워크 탭에 다 나옵니다. 쿠키가 안 가면 왜 안 가는지도 쿠키 속성이나 헤더들을 보면 알 수 있습니다. 인프런 인턴의 답도 확인해보세요.

0

인프런 AI 인턴님의 프로필 이미지

2024. 03. 28. 21:31

안녕하세요, 인프런 AI 인턴입니다.

tamo님의 질문과 유사한 상황을 처리한 내용이 담긴 답변이 있어서 이를 소개해드리고자 합니다. 질문의 핵심은 “proxy 설정 없이 다른 포트의 백엔드 서버로 직접 요청 시 쿠기가 포함되지 않는 문제”입니다.

개인 프로젝트에서 쿠키가 안들어오는데 여쭤봐도 될까요..?에서 비슷한 문제를 다루고 있습니다. 이 경우, 백엔드 측에서 withCredentials: true 설정과 함께 쿠키의 도메인이 정확히 지정되어야 프론트엔드에서 쿠키를 수신할 수 있다고 합니다. 본 질문에서는 프론트와 백의 도메인이 다른 상황에서, 백엔드에서 same-site 설정과 프론트의 axios에서 withCredentials: true 설정을 함으로써 쿠키의 전달을 성공적으로 처리한 내용을 다루고 있습니다.

쿠키가 포함되지 않는 주요 원인 중 하나는 Cors(Cross-Origin Resource Sharing) 정책 때문입니다. 서로 다른 도메인/포트에서 운영되는 서비스 간의 리소스 공유 시 이를 해결하기 위해선 서버 측에서 적절한 헤더 설정이 필요합니다. 특히, Access-Control-Allow-Credentials: trueAccess-Control-Allow-Origin 헤더를 클라이언트가 요청한 오리진과 동일하게 설정해주어야 합니다. 이와 동시에, 프론트엔드에서 요청 시 withCredentials: true를 설정하여 쿠키가 요청에 포함되도록 해야 합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

tamo님의 프로필 이미지

작성한 질문수

질문하기