리액트에서 쿠키 조회 질문..

Question

안녕하세요. 프론트 개발자 취업 준비중인 코린이 입니다.현재 개인프로젝트 기능 개발 완성하고 프론트, 백 따로 배포까지 다 했는데 실제 배포된 환경에서 갑자기 로그인이 안되는 상황입니다... 정확히는 로그인 자체는 되는데 로그인 후에 브라우저에 저장된 jwt 토큰 쿠키를 리액트에서 조회하는게 갑자기 배포하니까 안되네요. 로컬에서는 되던건데 ㅠ현재 프론트엔드 코드가import Cookies from 'universal-cookie';useEffect(() &#61;> { if (login) { const getData &#61; async () &#61;> { const cookies &#61; new Cookies(); const jwtToken &#61; cookies.get('token'); console.log('Token before getUserInfo:', jwtToken) const response &#61; await getUserInfo(); console.log(response); if (!response) return; const { _id, nickname, email, userImage, likey } &#61; response; dispatch(setUser({ _id, nickname, email, userImage, likey })); }; getData(); } }, [login, reviewInfo.likey]);로그인에 성공하면 이 로직이 실행이 됩니다. 여기서 getUserInfo 함수는 다음과 같구요.import Cookies from 'universal-cookie';export default async function getUserInfo() { const cookies &#61; new Cookies(); const jwtToken &#61; cookies.get('token'); console.log(jwtToken); if (!jwtToken) return; const response &#61; await axios.get(${origin_URL}/user/my, { headers: { Authorization: Bearer ${jwtToken}, 'Content-Type': 'application/json' }, withCredentials: true }); return response.data;}근데 클라이언트에서 로그인을 하면 로그인 자체는 잘 됩니다. 사용자가 입력한 로그인정보 백엔드로 잘 넘어가고 백엔드에서 로그인처리 후 응답으로 jwt 토큰 쿠키로 보내줘서 브라우저에 실제로 token 이라는 이름의 쿠키가 분명히 생깁니다. 그런데 그 후 프론트에서 const cookies &#61; new Cookies(); const jwtToken &#61; cookies.get('token'); 해서 token 쿠키 값을 조회하는데 undefined 가 나옵니다.. 그래서 jwtToken이 undefined 니까 getUserInfo 에서 if 문에 걸려가지고 아래 로직인 /user/my 로의 get 요청이 아예 실행이 안되는 상황입니다. 브라우저에 확실히 토큰 존재하는거 맞구요 토큰 이름 당연히 token 맞구요... 로컬에서는 잘 됐는데 배포하니까 갑자기 이러네요... ㅠㅠㅠ검색을 아무리해도 이런 사례는 없어서 해결을 못하고 있습니다.. 별의별 고민을 다 해보다가 하나 걸리는게크롬 브라우저의 개발자도구 애플리케이션 탭에 쿠키 보면 이렇게 나오잖아요?로컬일때랑 배포 환경일때랑 비교해보니 다른건 저 빨간 동그라미친 Domain 부분이 유일하더라구요. 이 사진은 배포 환경일때의 모습이라 Domain에 백엔드의 도메인으로 되어있는데 로컬에서는 localhost 라고 되어있습니다. 그래서 혹시 이 Domain이 다른 도메인이면 쿠키값을 못읽나 하는 생각을 하는중입니다.. 혹시 그런거 있나요? 왜 저렇게 버젓이 존재하는 쿠키를 못읽을까요.. 정말 피꺼솟 중입니다. 왜이런지 아시는분.. 도와주십셔..!!

남느 · Answer

https://yelee.tistory.com/85

메로나한입만 · Answer

백엔드 프론트 도메인이 다른거 같은데요?

리액트에서 쿠키 조회 질문..

2개의 답변

기술 목록