getServerSideProps에서 cookie를 서버측으로 전송하는 법

김민석·2021년 6월 23일
0

아래는 next-redux-wrapper를 활용했을 때의 코드다.

이 코드는 클라이언트 서버에서만 실행되기 때문에, 브라우저에서 쿠키에 내용을 담지 못하고 서버로 전송하는 문제가 있었다.

이전에는 브라우저에서 axios가 실행되었기 때문에 자동으로 쿠키가 전송되고 있었다.

아래와 같이 요청의 쿠키를 다시 서버로 전송해 주는 방식으로 해결할 수 있다.

export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req }) => {
	const cookie = req?.headers.cookie; // req가 있다면 cookie에 요청에 담겨진 cookie를 할당한다.
	axios.defaults.headers.Cookie = ''; // 요청이 들어올 때마다 초기화 시켜주는 것이다. 여기는 클라이언트 서버에서 실행되므로 이전 요청이 남아있을 수 있기 때문이다
	if (req && cookie) {
		axios.defaults.headers.Cookie = cookie;
	}
	store.dispatch({
		type: LOAD_MY_INFO_REQUEST,
	});
	store.dispatch({
		type: LOAD_POSTS_REQUEST,
	});
	store.dispatch(END);
	await store.sagaTask.toPromise();
});

0개의 댓글