문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 2
프론트엔드
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 2
두줄요약
Next.js에서 컴포넌트 내부 CSS 임포트와 브라우저 캐시가 겹치며 CORS 에러가 발생했습니다. 전역 임포트 또는 `crossOrigin` 설정으로 문제를 해결했습니다.
문제 상황
- Next.js 프로젝트에서 정주행 모드 옵션이 브라우저 캐시 사용 시 유지되지 않는 문제
- 컴포넌트 내부에서 임포트한
swiper/css가 CORS 에러를 유발하는 현상
원인 분석
- 전역
_app.tsx임포트와 컴포넌트 내부 임포트의 동작 차이 - 컴포넌트 내부 임포트 시 CSS가 별도 파일로 분리되고, Client-Side Navigation에서 GET Fetch로 가져오는 구조
- 일부 브라우저가 link 태그 요청 캐시를 GET Fetch에 재활용하면서 CORS 헤더 부재가 문제로 연결
해결 방법
swiper/css를 전역_app.tsx에서 임포트하도록 변경next.config.js의crossOrigin: 'anonymous'옵션으로 link 태그 요청에 CORS 헤더 부여