서로 다른 도메인에서 쿠키 토큰 사용하기

❗ 서버, 프론트엔드의 주소가 다르면 cookie token이 발급이 되지 않는다.

과거에 진행했었던 cookeep 팀프로젝트에서 로그인 기능을 작업하며 cookie token 때문에 많은 애를 먹었었다. 아직 도메인을 통합하기 전인 개발 단계에서 token 테스트를 해보려고 했으나 백엔드와 프론트엔드의 주소가 달라, 쿠키가 전송이 되지 않았기 때문이다. 그때는 결국 해결방법을 찾지 못해서 추후에 배포 후 도메인이 통합되고 나서야 cookie의 token을 발급할 수 있었다. 이번에 redit clone 프로젝트를 진행하며, 서로 다른 주소간의 cookie 전송방법을 알게되어 기록으로 남겨놓는다.

클라이언트 단에서 해야할 일

  const handleSubmit = async (event: FormEvent) => {
    event.preventDefault();
    try {
      const res = await axios.post(
        '/auth/login',
        { password, username },
        ✅ { withCredentials: true }
      );

      dispatch("LOGIN", res.data?.user);

      router.push('/');
    } catch (error: any) {
      console.log(error);
      setErrors(error.response?.data || {});
    }
  };

해당 handleSubmit함수는 로그인 페이지에서 로그인 버튼을 클릭하면 발동되는 함수이다.
axios로 post요청을 보낼 시에, withCredentials를 true로 설정해주어야 한다.

서버 단에서 해야할 일

const origin = 'http://localhost:3000';
app.use(
  cors({
    origin,
    ✅ credentials: true,
  })
);

서버 단에서도 cors를 설정해주는 부분에 credentials설정을 true로 표기하여 추가해준다.