[Node] Refused to apply style from ... MIME file ~

cautious·2021년 6월 20일

🚫 Refused to apply style from 'http://localhost:3000/src/css/common.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

🚫 GET http://localhost:3000/index.js net::ERR_ABORTED 404 (Not Found)

위 오류 및 해결법에 관해 정리한다.

오류 발생 배경

서버에서 프론트엔드의 index.js를 불러오는 과정에서 발생하였다.
프론트엔드와 서버측 폴더를 분리한 상태였으며, 불러온 파일 내용과 폴더 구조는 다음과 같았다.

폴더 구조

├─frontend
│  ├─index.js
│  ├─index.html
│  └─src
│      ├─common
│      ├─css
│      └─js
├─server
│  └─index.js

서버 코드

server/index.js

const express = require('express');
const path = require('path');
const app = express();

app.set('front', process.env.FRONT || path.join(__dirname, '../frontend'));
app.get('/', (req, res) => {
  res.sendFile(path.join(app.get('front'), '/index.html')); // FIXME
});

프론트 코드

frontend/index.html

<!DOCTYPE html>
<html>
  <head>
    <!-- FIXME -->
    <link rel="stylesheet" href="./src/css/common.css" />
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script type="module" src="./index.js"></script>
  </body>
</html>

발생 원인

href로 연결한 링크에 문제가 있는 것으로 추측된다.
./src/css/common.css 의 주소체계에 문제가 있는 듯 하다.

index.html에서 import한 경로를 참고하여 표를 작성해보면 다음과 같이 매핑된다.
현재 서버에서는 res.get()으로 index.html만 제공해주고 있다. localhost/index.js와localhost/src/css/common.css 경로에 대해 서버에서 제공하는 파일이 없으니 스타일도 적용할 수 없고 404에러도 뜨는 것이었다.

유저가 접근하는 경로	실제 경로	서버 제공 여부
localhost:3000	frontend/index.html	O
localhost:3000/index.js	frontend/index.js	X
localhost:3000/src/css/common.css	frontend/src/css/common.css	X

해결 방법

서버에서 나머지 파일들도 제공해주면 된다.
express.ststic()을 이용하여 정적 파일로 나머지를 제공해주자.

index.js

const express = require('express');
const path = require('path');

const app = express();
app.set('port', process.env.PORT || 3000);
app.set('front', process.env.FRONT || path.join(__dirname, '../frontend')); 
app.use('/', express.static(path.join(app.get('front'), '/')));
app.listen(app.get('port'), () => {
  console.log(app.get('port'), 'is listening...');
});

참고

https://stackoverflow.com/questions/55882824/mime-type-text-html-is-not-a-supported-stylesheet

https://developerf1.com/how-to/solving-stylesheet-not-loaded-because-of-mime-type

cautious

이전 포스트