Root Cause and Solution for CORS Errors When Importing CSS Inside Next.js Components

An analysis of CORS errors occurring in environments using browser cache when importing CSS files inside React components in a Next.js project. This issue stems from the interaction between Client-Side Navigation and browser cache policies.

Root Cause of the Problem

When CSS is imported globally in _app.tsx, all files are combined into a single minified CSS file and loaded via a link tag, thus bypassing CORS policies. In contrast, importing inside a component separates it into a distinct file via Code Splitting, and it is loaded via a GET Fetch request during page navigation. Since GET Fetch requests must comply with CORS policies, Origin and Access-Control-Allow-Origin headers are essential.

The problem occurs in Chrome and Safari browsers. These browsers treat CSS requests loaded via link tags and GET Fetch requests as identical, reusing the cache. Since link tag requests do not include CORS headers, reusing the cached data for GET Fetch requests results in CORS violation errors due to missing headers. Firefox handles the two requests separately, so this issue does not reproduce.

Solutions

Two main solutions can be applied.

• Global Import: Import CSS in _app.tsx so that it is loaded only via a link tag without separate Fetch requests.
• Add crossorigin Attribute: Setting the crossOrigin: 'anonymous' option in next.config.js forces CORS headers to be included in link tag requests. This ensures that cached requests meet CORS policies, preventing errors.