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

장상현님의 프로필 이미지
장상현

작성한 질문수

React로 NodeBird SNS 만들기

client와 server 도메인이 다를경우 cookie 값 불러오기 문제

작성

·

3.8K

0

안녕하세요 조현영님!

제가 지금까지 배운것을 활용하다가 문제가 발생했습니다.

기존 API가 다른 AWS ec2에 있었고 client 부분만 제가 localhost에서 작업중인데요

로그인 cookie 관련해서

만약 api도 localhost에서 작동하게하면 application 부분 보면 cookie에 domain 값이 localhost로 적혀서 있어서 새로고침을 해도 

_app getInitialProps가 작동을 잘합니다.

코드는 이렇습니다.

  static getInitialProps = async ({
    ctx,
    Component,
  }: AppContext & { ctx: NextJSContext<RootState> }=> {
    let pageProps = {};
    const cookie = ctx.isServer ? ctx.req.headers.cookie : '';
    const state = ctx.store.getState();
    if (ctx.isServer && cookie) {
      axios.defaults.headers.Cookie = cookie;
      axios.defaults.withCredentials = true;
      const { userInfo } = state.user;
      if (!userInfo.id) {
        ctx.store.dispatch({
          type: LOAD_LOGGED_INFO.REQUEST,
        });
      }
    }
    if (Component.getInitialProps) {
      pageProps = (await Component.getInitialProps(ctx)) || {};
    }
    return { pageProps };
  };
그런데 똑같은 코드인데 API 부분을 aws로 작동하게 한다음 로그인 하면 domain 부분이 aws domain으로 잡히고
새로고침을 하면 저 부분이 작동을 하지 않습니다 ㅜㅜ
정확히는 새로고침을 할때 ctx.req.headers.cookie값이 undefined가 됩니다.
application 부분을 보면 여전히 쿠기값은 남아 있고요
이런 상황에서 새로고침이 작동하게 하려면 어떻게 해야할까요?
이해를 돕고자 사진하나 첨부합니다!

답변 5

0

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

localhost 앞에는 .app. 이런 것을 붙일 수 없습니다.

개발 시에는 백엔드 서버를 수정하지 않더라도 백엔드 서버를 localhost로 구동하는 게 맞습니다.

0

장상현님의 프로필 이미지
장상현
질문자

기존 서버가 이미 있었고 넥스트js로 기존의 프론트서버만 리팩토링 하기 때문입니다. 도움이 될지도 몰라서 쿠키 설정 값은 

  secure: false,
  httpOnly: true,
  maxAge: appConfig.persistentSessionTTL,
  domain: '.app.localhost:8000'
이렇고 redis로 store를 쓰고 있습니다.
더 도움이 될지 몰라 제가 찾아본것중에서 해결이 되지는 않았지만 의미 있을지도 모를 자료를 첨부해봅니다.
왜 domain 값을 입력하면 생성을 안하는지 잘 몰르겠습니다. ㅜㅜ
그 전엔 생성이라도 되었는데 말이죠 ㅜ
혹시 passport 문제인가도 찾아봤는데 잘모르겠습니다.
한번 도와주시면 감사하겠습니다.

0

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

쿠키가 왜 안 생기는지는 잘 모르겠네요. 프론트 서버만 로컬호스트라서 그런 것 같습니다. 사실 백엔드는 실제 서버로 하시고, 프론트를 로컬호스트 서버로 쓸 이유가 없습니다.

지금 그렇게 하시는 특별한 이유가 있나요?

0

장상현님의 프로필 이미지
장상현
질문자

cookies = {

 domain: 'localhost:8000',

}

domain:'127.0.0.1:8000'
domain: 'localhost:8000',
domain: 'localhost',

이런식으로하게 되면 쿠키가 아예 생성이 안됩니다 ㅜㅜ

0

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

이거 AWS쪽에서 cors origin이랑 express-session domain 설정을 localhost:포트로 바꿔주셔야할것같습니다.

쿠키가 공유 안 되는 문제에요.

장상현님의 프로필 이미지
장상현

작성한 질문수

질문하기