[이슈] - Invalid character in header content ["Set-Cookie"]...

📋 내용 : 쿠키의 Expires 옵션값 형태로 인한 에러 해결법

'클론코딩으로 시작하는 Next.js' 라는 책을 따라가다가 발견한 문제입니다. (이 책 괜찮아요)

res.setHeader(
        "Set-Cookie",
        `access_token=${token}; Path=/; Expires=${new Date(
          Date.now() + 60 * 60 * 24 * 1000 * 3 //3일 후 쿠키 만료
        )}; HttpOnly`
      );

문제의 코드를 살펴보면 setHeader 메서드를 통해 헤더에 쿠키를 설정하고, 이 때 쿠키에는 인증을 위한 access_token과 쿠키 옵션인 Path, Expires, HttpOnly를 문자열 쌍으로 대입합니다.

?! 작가님의 코드를 그대로 복붙해도 오류가 출력된다...

이제 이 이슈를 해결해보도록 하겠습니다.

 

원인은 Expires 옵션으로 주어진 날짜 데이터의 형식 때문이었는데, new Date(Date.now() + 60 * 60 * 24 * 1000 * 3)를 콘솔에 찍어보면 다음 결과물이 나옵니다.

바로 여기서 포맷이 어긋난 것 같습니다!

 

일반적으로 쿠키의 Expires 옵션에는 "Wdy, DD−Mon−YYYY HH:MM:SS GMT" 형태로 날짜값이 주어져야 하는데, 이건 Date 클래스로 생성한 기본 날짜 객체의 형태입니다. 😅

 

따라서, 이를 쿠키가 원하는 날짜 포맷으로 고쳐주면 에러를 해결할 수 있습니다.

res.setHeader(
    "Set-Cookie",
    `access_token=${token}; Path=/; Expires=${new Date(
      Date.now() + 60 * 60 * 24 * 1000 * 3 //3일
    ).toUTCString()}; HttpOnly`
  );

쿠키가 에러 없이 전송된 모습입니다!

+ 다만 Invalid character in header content ["Set-Cookie"]... 이 오류는 정말 다양한 이유로 일어나는 듯 합니다.

누구는 줄바꿈을 고치니 해결되었다고 하고, 저의 경우에는 Expires 옵션을 고치니 해결되는 등 다양한 원인이 있으니 이는 참고로 활용하시길 바랍니다!