[Node.js + React ] CORS 문제 해결

        try {
            // 서버의 /login 엔드포인트로 POST 요청을 보냅니다.
           const response = await axios.post(
                  'http://localhost:8080/login',
                  {
                    username,
                    password
                  },
                  {
                    withCredentials: true // 🔥 추가!
                  }
                );
            
            // 요청 성공 시
            setMessage(response.data.message);
            setIsSuccess(true);
            
            // 입력 필드 초기화
            setUsername('');
            setPassword('');
            
            // 로그인 성공 후 페이지 이동 로직 추가 가능
           navigate('/home'); // 예: 홈 페이지로 이동

        } catch (error) {
            // 요청 실패 시
            if (axios.isAxiosError(error) && error.response) {
                setMessage(error.response.data.message || '로그인에 실패했습니다.');
            } else {
                setMessage('네트워크 오류가 발생했습니다.');
            }
            setIsSuccess(false);
        }
    };

 

passport.js 를 사용해 로그인,로그아웃 구현도중 발생한 에러 정리

- 로그인은 아주 잘됐다.

- DB에 있는 Sessions 테이블을 확인해보니 연결도 됐다

- 로그아웃 시도

- Sessions 테이블에서 끊기질 않음 << 여기서 문제가 발생

- 당연히 logout.tsx , logout.js , app.js 에서 로직 잘못짰나 하나하나 살펴봄

- chatgpt, gemini 한테도 물어봤으나 이상이 없었다.. 헌데 CORS 부분을 계속 의심하고있었다 하지만 진척이 전혀 없는 상태

- 지푸라기 잡는 심정으로 google에 CORS 에러를 검색

- 다른 사람들의 login 코드에  withCredentials: true 존재하는 것을 확인

- 나또한 Login.tsx에 withCredentials: true 를 추가

- 해결완료

 

client 부분의 localhost:5173 이고 server 부분은 localhost:8080 이다 이때 웹 보안 규칙인 동일 출처 정책(Same-Origin Policy)에 따라, 브라우저는 기본적으로 크로스 오리진 요청에 쿠키를 포함하지 않는다. 이것은 악의적인 웹사이트가 client 의쿠키를 훔쳐서 다른 사이트에서 client인척 로그인하는 것을 막기 위한 보안 조치이다 여기서 withCredentials: true는 이 보안 규칙을 예외로 두는 역할을 한다.

 

그러면 여기서 내가 궁금한 것은 쿠키를 못보내는데 어떻게 db의 sessions 테이블에는 로그인 정보가 저장이 된 것일까? 궁금해서 알아봤다.

 

서버의 로그인 과정 (쿠키와 무관하게 동작하는 부분)

1. 클라이언트가 로그인 요청을 보냄:
   • POST 요청이 http://localhost:8080/login으로 전송됨
   • 요청 본문(request body)에는 username과 password가 포함되어있음
2. 서버가 요청을 받음:
   • login.js가 이 요청을 받고 username과 password를 추출
3. 데이터베이스 확인:
   • 서버는 데이터베이스에서 해당 username을 가진 사용자를 찾는다
   • 그리고 요청으로 받은 password와 데이터베이스에 저장된 암호화된 비밀번호를 비교한다
4. 로그인 성공 처리:
   • 비밀번호가 일치하면 서버는 사용자의 세션 객체를 생성하고, isLoggedIn 상태를 true로 설정한다. 이 세션 정보는 서버 측 메모리나 데이터베이스의 sessions 테이블에 저장된다

 

이처럼 세션에 저장되는 것은 로그인만 되면 된다는 뜻이었다.

 

그리고 로그인이 되면 server 에서 client 에게 로그인이 성공했다는 의미로 세션쿠키를 준다 이때 client 는 server의 localhost와 연결된 쿠키저장소에 세션쿠키를 한번은 저장하게 된다 문제는 이 다음에 발생한다. 예를들어 내 client 의 로컬서버 주소가 localhost 5173 , 내 server의 로컬 주소가 localhost 8080 이라고 치자 여기서 client가 다음 요청을 server에게 할때 세션쿠키를 넣어서 보내줘야하는데 withCredentials: true 가 없으면 넣어서 보내지 않아 server측에서 로그인 한건지 아닌건지 알 수가 없어지게 된다. 그렇게 로그인을 한건지 안한건지 모르게된다.. 이때문에 내 상황에서도 로그인이 된건지 안된건지 모르기때문에 로그아웃이 안됐고 이어 sessions 테이블에 연결된 세션도 없어지지 않았던 것..

 

CORS 때문에 애를 정ㅁ말 먹어서 기억은 잘 할 것 같다..

 

끝..

 

 

 

---

 

공부를 더 해본결과 둘다 필요한 것이었다 서버측에서는 credentials : true 옵션이 있어야 localhost5173 요청을 받는 것이었고 클라이언트 측에서는 withCredentials: true 가 있어야 쿠키를 포함해서 서버에 보낼수가 있는 것이다

 

서버: credentials: true 옵션을 통해 "나는 쿠키가 포함된 요청을 받아들이겠다"고 선언합니다.

클라이언트: withCredentials: true 옵션을 통해 "나는 이 요청에 쿠키를 포함해서 보내겠다"고 선언합니다.