Vercel 말고 cloudtype에 배포한 이유
원래 Front-end는 Vercel에 배포하고, Back-end는 cloudtype에 배포하려고 했다.
간단하게 배포하고 싶었기 때문에 별도의 도메인을 구매하지 않고, Vercel과 cloudtype이 할당해 주는 기본 도메인을 사용하려고 했다.
Front-end와 Back-end의 Origin이 다르기 때문에 axios와 express cors 미들웨어를 이용해 cors 관련 설정을 했다.
Vercel이 할당해 주는 도메인 주소와 cloudtype이 할당해 주는 도메인 주소는 서로 다른 site이기 때문에 cross-site 간에 쿠키를 전송하기 위해 인증 토큰 쿠키에 sameSite=None 설정과 secure 설정을 했다. (이 설정을 하지 않으면, 디폴트 설정인 sameSite=Lax가 되어서 Vercel app에서 cloudtype app으로 cross-site 요청 시 쿠키가 전송되지 않는다.)
배포 결과, PC에서는 인증 관련 기능이 잘 동작했는데, ios에서 인증 토큰 쿠키가 서버로 전송되지 않는 문제가 발생했다.
검색해 보니 ios에서 SameSite=None; Secure로 설정된 쿠키가 서버에 전송되지 않는 문제가 있는 것 같았다. 그래서 그냥 cross-site 요청이 아니도록 만들기로 했다.
Vercel 말고 cloudtype에 Front-end도 배포하면 더 이상 cross-site 요청이 아니게 되어서 문제가 해결될 것 같아 시도해 봤다.
그리고, 더 이상 cross-site 요청이 아니므로 sameSite 값을 None에서 Strict로 변경했다.
인증 토큰의 sameSite 설정을 None에서 Strict로 변경하고, Front-end 앱도 cloudtype에 배포한 결과, PC뿐만 아니라 ios에서도 인증 기능이 잘 동작했다.