Next.js 컴포넌트 내부 CSS 임포트 시 발생하는 CORS 에러의 근본 원인과 해결

Next.js 프로젝트에서 React 컴포넌트 내부에 CSS 파일을 임포트했을 때, 브라우저 캐시를 사용하는 환경에서 CORS 에러가 발생하는 현상을 분석했다. 이 문제는 Client-Side Navigation과 브라우저 캐시 정책의 상호작용에서 비롯된다.

문제의 근본 원인

전역 _app.tsx에서 CSS를 임포트하면 모든 파일이 하나의 압축된 CSS로 합쳐져 link 태그로 로드되므로 CORS 정책을 따르지 않는다. 반면, 컴포넌트 내부에서 임포트하면 Code Splitting을 통해 별도 파일로 분리되고, 페이지 이동 시 GET Fetch 요청으로 로드된다. GET Fetch는 CORS 정책을 준수해야 하므로 Origin 및 Access-Control-Allow-Origin 헤더가 필수적이다.

문제는 크롬과 사파리 브라우저에서 발생한다. 이 브라우저들은 link 태그로 로드된 CSS 요청과 GET Fetch 요청을 동일한 요청으로 간주하여 캐시를 재활용한다. link 태그 요청에는 CORS 헤더가 없으므로, 캐시된 데이터를 GET Fetch에 재사용할 때 헤더 누락으로 인해 CORS 위반 에러가 발생한다. 파이어폭스는 두 요청을 별개로 처리하여 이 문제가 재현되지 않는다.

해결 방법

두 가지 주요 해결책을 적용할 수 있다.

• 전역 임포트: CSS를 _app.tsx에서 임포트하여 별도 Fetch 요청 없이 link 태그로만 로드되도록 한다.
• crossorigin 속성 추가: next.config.js에 crossOrigin: 'anonymous' 옵션을 설정하면 link 태그 요청에도 CORS 헤더가 포함되도록 강제한다. 이를 통해 캐시된 요청이 CORS 정책을 충족하게 되어 에러를 방지한다.