Next.js 트러블슈팅: CORS와 Version Skew 에러 원인부터 해결까지

카카오페이의 머니 충전 서비스 개발 중, Next.js(v13, Pages Router) 기반의 SSR 환경에서 예상치 못한 CORS 에러와 페이지 새로고침 현상이 발생했다.

에러 분석 결과, 원인은 CSS 파일 요청 방식의 차이에 있었다. SSR로 페이지가 처음 로드될 때는 Origin 헤더가 없는 일반 요청이 발생하지만, Client-side navigation 시에는 fetch API를 통해 Origin 헤더가 포함된 CORS 요청이 발생한다.

이때 브라우저에 ACAO(Access-Control-Allow-Origin) 헤더가 없는 응답이 캐싱되어 있으면, 이후 발생하는 fetch 타입의 요청이 CORS 정책을 위반하며 에러를 일으키게 된다.