react + express 세션이 제대로 박히지 않는 경우

react, axios, express, express-session, cors 를 사용하고 있다.

클라이언트에 세션이 제대로 박히지 않는 경우가 있었다

• 경우1 : 애초에 세션자체가 프론트로 넘어가지 못하는 경우
• 경우2 : 세션이 프론트로 넘어왔으나, 이후 재요청시 백엔으로 세션을 넘기지 못하는 경우

 

모든내용을 기억하지는 못하지만, 가장 중요한 것은 두 가지였다.

• 프론트에서 백으로 요청할때 헤더 항목을 뭔가 빼먹지 않았는가
• 백에서 세션을 생성할 때 프로퍼티를 뭔가 빼먹지 않았는가

 

await axios.post(
  "https://jindoback.wonj.in/sessiontest",
  {'a':'test'},
  { withCredentials: true }
);

  axios로 프론트->백 요청을 한다면 withCredentials : true를 빼먹지 말아야한다.

 

const corsOptions = {
    origin : true,
    credentials : true
};

app.use(cors(corsOptions));

  한편, 백엔드에서는 credential을 true값으로 설정하고, 필요에 따라 origin 허용을 설정한다. 참고로 credential이 true라면, origin은 오직 하나의 값만 가질 수 있다. 프론트 개발서버/실서버 origin값을 바꿔가며 테스트하기 너무 힘들어서 그냥 들어오는건 싹다 허용해주기로 했다. ( cors미들웨어의 'origin:true'는 ORIGIN 헤더값에 *를 넣는 것과는 전혀 다른 것이다. )

 

app.use(session({
    secret:process.env.COOKIE_SECRET,
    resave:false,
    saveUninitialize:true,
    cookie : {
        httpOnly : true,
        sameSite : 'none',
        maxAge : 5300000,
        secure : true,
    },
}));

  백에서 세션을 만들때는 특히 samesite와 secure프로퍼티를 잘 살펴야한다. 브라우저 개발자 도구의 Network탭에서 해당요청의 Response 항목을 보면 노란색의 warning이모지 '⚠️' 가 떠있을 수 있다. 이 내용은 보통 위 속성값의 변경/추가로 해결할 수 있었다.

 

세션이 유지되자 기쁨의 눈물을 흘리던 상황

답은 생각보다 가까이에 있었다.