다른 도메인 간 쿠키 공유하는 방법

쿠키 공유

프론트(react) : 3000 / 서버(express) : 7000 포트 사용한다고 가정했을 때, 두 도메인은 서로 다르다.
클라이언트에서 요청을 보낼 때, 쿠키 값을 같이 보내주어야 서버에서 해당 정보를 찾을 수가 있다.
서로 다른 도메인 간에는 쿠키를 주고 받을 수 없으므로 withCredentials옵션을 사용해야 한다.

브라우저

프론트에서 axios요청할 때, withCredentials부분을 true로 해서 수동으로 CORS 요청에 쿠키값을 넣어줘야 한다.

withCredentials 전역 설정

axios.defaults.withCredentials = true;

axiod 옵션 객체로 넣기

axios.post('/', variables, { 
	withCredentials: true
})

두 가지 방법 중 하나를 따라 쿠키 값을 넣어준다.

서버

app.use(cors({
    origin: true,
    credential: true 
}));

origin: "*"의 경우 보안 강화로 인해 사용할 수 없게 되었다.
origin: true 또는 브라우저의 도메인을 직접 입력하는 방법이 있다.

---

마치며

만약 withCredentials를 사용하지 않는다면 쿠키가 절대 생성되지 않는다.
실제로 로그인 기능을 구현할 때, 포스트맨에서 로그인을 하면 쿠키가 제대로 생성되는데 직접 로컬호스트에서 로그인 하면 쿠키가 계속 생성되지 않는 문제가 발생했다. (이 것 때문에 정말 많이 뒤적거렸다...)

const onClickLogin = (data) => {
  axios
    .post("http://localhost:7000/api/user/login", data, {
      withCredentials: true,
    })
    .then((res) => {
      if (res.data.success) {
        console.log(res.data.doc);
        dispatch({ type: LOG_IN, payload: res.data.doc });
      } else {
        console.log(res.data);
      }
    });
};

위의 로그인 구현 함수에서 withCreduntials 부분을 빼먹었었어 발생한 문제였다.!