🤍 전 강의 25% 할인 중 🤍

2024년 상반기를 돌아보고 하반기에도 함께 성장해요!
인프런이 준비한 25% 할인 받으러 가기 >>

  • 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

24.03.28 21:29 작성 조회수 96

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

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

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.03.28

안녕하세요, 인프런 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를 설정하여 쿠키가 요청에 포함되도록 해야 합니다.

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

채널톡 아이콘