리엑트 크롬 쿠키 저장안됨 해결

분명히 응답헤더에는 set-cookies가 잘찍히는데 브라우저 쿠키에 자동으로 저장이 안된다면?

원인은 sameSite였다. 명시하지않더라도 크롬정책에 의하여 기본값으로 세팅되어있다고한다.

해결방법은 서버에서 쿠키 구울때 sameSite:none랑 secure옵션을 추가해보자.

단 이렇게될경우 https에서만 작동된다. http 즉 로컬(http://localhost:3000/)로 개발할때는 크롬에서 막아 저장되지않으니 참고.

router.post(
  "/",
  async (res, req) => {
  
  	const jwt = 'test'
	const cookieOptions = {
        // sameSite: "strict",
        sameSite: "none",
        httpOnly: true,
        secure: true,
        // domain: "http://localhost",
        // expires: new Date(Date.now() + parseInt(ENV.AUTH_EXPIREATION)),
        maxAge: 24 * 60 * 60 * 1000,
        path: "/",
      };

      res.cookie("x_auth", jwt, cookieOptions);
      
   return res.status(200).json({
        message: "jwt token issued",
        jwt_token,
      });
  })

 

그래도 안되면 혹시 쿠키저장을 크롬에서 막고있지않은지 settings을 살펴본다.

 

localhost에서도 크롬에서 쿠키를 확인하고싶다면 cloudflare에서 터널링을 뚫어서하는 방법도있다고하는데 좀더 찾아봐야겠다.

 

참고

https://seob.dev/posts/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%BF%A0%ED%82%A4%EC%99%80-SameSite-%EC%86%8D%EC%84%B1/

브라우저 쿠키와 SameSite 속성 / seob.dev

https://www.chromium.org/updates/same-site/

SameSite Updates

https://developers.google.com/search/blog/2020/01/get-ready-for-new-samesitenone-secure?hl=ko 

새로운 SameSite=None; Secure 쿠키 설정에 대비  |  Google 검색 센터 블로그  |  Google for Developers