React - localhost 에서 cookie samesite 이슈 해결하기.

크롬의 새로운 쿠키 정책에 의해서, 

개발 환경인 localhost에서 쿠키를 이용한 로그인 유지기능에 문제가 생겼다.

 

** cookie 에 SameSite 옵션을 'None'으로 해야만 CORS 가 가능하다.

** SameSite 옵션이 'None' 인 경우, Secure 옵션은 true 여야만한다. -> 사이트가 https 여야만 한다.

 

 

이 두가지 전제때문에, 몇군데 손을 봐야만 했다.

 

1. PHP >= 7.3 에서 SameSite 옵션 설정하기.

$expire = time() + 3600		
setcookie('cookieName', 'cookieValue', ['expires'=>$expire, 'httponly'=>true, 'samesite'=>'None', 'secure'=>true, 'path'=>'/']);

2. 서버 헤더 설정

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, x-requested-with, origin ...
Access-Control-Allow-Origin: https://localhost:3000

 

3. axios - option 의 withCredentials = true, crossDomain = true 로 준다.

const opt = { method:'get', url: URL, crossDomain: true, withCredentials: true }

 

4. 프로젝트 루트에 .env 파일을 추가

HTTPS=true

 

이렇게 하면 https://localhost:3000 으로 접속할 수 있다.

크롬에서 인증서가 유효하지 않다고 경고가 뜨는것은 살포시 무시해준다. 

 

물론, Production 환경에서는, allow origin 도 사용하지 않고, samesite 도 설정해주지 않으면 보안에 도움이 될것이다.