[에러] text/html MIME

문제점 

- 디테일 페이지 진입 시에는 괜찮으나, 새로고침을 하면 text/html 에러가 발생하면서 백화현상 발생

 

해결법

- vite.config.js의 defineConfig 부분에 base 이 빈값으로 들어가 있었는데, '/'를 추가해서 절대 경로를 설정하는 것이다.

 

디테일

- React 애플리케이션은 브라우저의 URL을 사용해 SPA(Single Page Application) 방식으로 동작하지만 브라우저는 새로고침 시 현재 URL을 기준으로 모든 경로를 재해석한다.

 

. 상대 경로와 URL 구조의 차이

• /home
  • URL이 /home일 때, 브라우저는 이를 폴더로 간주하고 내부적으로 /home/로 처리합니다.
  • 따라서 상대 경로 ./src/index.jsx는 /home/src/index.jsx로 해석됩니다.
  • 개발 서버(Vite)는 보통 존재하지 않는 리소스 요청을 index.html로 리다이렉트하므로, React 라우터가 다시 동작하며 화면이 정상적으로 표시됩니다.
• /home/detail
  • URL이 /home/detail일 때, 브라우저는 이를 파일 경로로 간주합니다.
  • 상대 경로 ./src/index.jsx는 /home/src/index.jsx로 해석되지 않고, 대신 /home/detail/src/index.jsx로 해석됩니다.
  • 이 경로에 대응하는 리소스가 없으므로 서버는 404 에러를 반환하거나, 잘못된 HTML 응답을 반환하게 됩니다.
  • 반환된 text/html MIME 타입을 브라우저가 JavaScript로 처리하려다 오류가 발생합니다.

정리된 동작 차이

URL상대 경로 해석 결과개발 서버의 응답

예시 : 

/home	/home/src/index.jsx	index.html로 리다이렉트
/home/detail	/home/detail/src/index.jsx	404 또는 잘못된 index.html 반환

 

결론

- base = '/' : Vite는 모든 리소스의 경로를 절대 경로로 설정한다. 이로 인해 브라우저가 경로를 잘못 해석할 가능성이 사라진다.