로그인 이후 생성된 세션 정보 못 읽어오는 현상

회원가입 시 세션 정보가 잘 저장된다. 콘솔로그도 잘 찍힌다.

❓ 그런데, 이후에 다른 라우터를 통해 세션을 확인하면 쿠키만 확인되고 user_idx 같은 세션정보를 조회하지 못해서 user_idx와 연결된 nickname 등을 사용할 수 없었다.

위처럼 세션 쿠키만 조회되고 user: { ... }가 조회되지 않는다.
🔎 최초 로그인 시에만 저장이 되고, 다른 API 요청을 받을 때, 세션 정보가 백과 프론트 사이에서 잘 이동되지 않는 것 같았다.
🔎 그런데 쿠키는 잘 읽어오는데, 내가 저장했던 req.session.user 만 읽히지 않아서 더 혼란스러웠다.

✅무수한 구글링과 GPT 질문 결과, Credentials이 원인인 것을 알았다.

요약하자면, 클라이언트와 서버 둘 다 Credentials 부분을 true로 설정해줘야 한다.

• Credentials은 쿠키나 Authorization 인증 헤더 등을 가진 자격 인증 정보를 말한다.
  기본적으로 브라우저에서는 요청과 응답이 오고 갈 때, 쿠키 같은 인증 관련 데이터를 저장하지 않는다. 그래서 이를 해결하기 위한 옵션이 바로 withCredentials 옵션이다.
  withCredentials는 서로 다른 도메인에 요청을 보낼 때, 여기서는 프서버(3001포트)에서 프론트(3000포트) 요청에 인증(credential) 정보를 담아서 보내야 한다.
  그래서, API 요청 메소드를 보낼때 withCredentials 옵션을 true로 설정해야한다. 클라이언트 뿐만 아니라 서버에서도 Access-Control-Allow-Credentials 헤더를 true로 함으로써 인증 옵션을 설정해야한다.

참고: https://inpa.tistory.com/entry/AXIOS-📚-CORS-쿠키-전송withCredentials-옵션 [Inpa Dev 👨‍💻:티스토리]

✅ cors 정책을 프론트에선

const instance = axios.create({
  baseURL,
  withCredentials: true,
  headers: {
    Accept: 'application/json',
    // 'Access-Control-Allow-Origin': '*',
  },
});

withCredentials를 true로 바꾸고 , Access-Control-Allow-Origin': '*' 를 제거 (와일드 카드는 쓰지 못한다고한다.)

✅ cors 정책을 백에선

// CORS 설정
const corsOptions = {
  origin: "http://localhost:3000", // 요청을 허용할 출처를 명시
  credentials: true, // 자격 증명 허용
};
app.use(cors(corsOptions));

프론트가 사용하는 포트인 localhost:3000을 요청 허용할 출처로 설정하고 credentials를 true로 설정하니 해결되었다.

👌 그냥 세션 정보만 홀라당 사라지고 에러가 뜬 것도 아니어서 원인을 찾는데 오래 걸렸다.
👌 브라우저에서 쿠키나 세션 같은 인증 정보의 이동에 관련된 것은 CORS정책과 깊은 연관이 있다는 것을 알았고 Credentials에 대해 이해할 수 있었다.