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

상황

<!--link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"-->
<link href="../bootstrap.css" rel="stylesheet" id="bootstrap-css">

cdn을 사용하지 않고 bootstrap.css 파일을 로컬에 포함해서

내가 구현하고자 하는 웹페이지의 디테일을 조작하기 위해

 

bootstrap.css를 작업 중인 디렉토리에 포함하고 경로를 지정했는데도

계속 css 파일을 찾지 못하고

 

 

와 같이 css가 적용되지 않은 html의 틀만 뱉어냈다.

 

에러메세지

 

 

728x90

 

 

까닭

결국 경로를 제대로 설정하지 않아서인데,

경로를 제대로 로컬에 포함하고 맞는 상대 경로를 지정해줬어도

// user에게 public folder를 사용가능하게 제공 /public 이동시 public폴더를 볼 수있음 
//express.static : express의 정적 파일 제공
app.use("/public", express.static(__dirname + "/public"));

server.js에서 해당 코드를 포함했기 때문에

user를 위한 정적 파일은 public 디렉토리 안에 포함되어야 한다.

 

그런데 public에 .css파일이 없으므로 찾을 수 없는 것이다.

 

 

 

 

 

해결

bootstrap.css를 public 디렉토리에 포함하고, 상대경로를 그에 맞게 수정하였다.

<link href="../public/bootstrap.css" rel="stylesheet" id="bootstrap-css">

 

 

 

 

 

 

참고한 글

https://pythonq.com/so/css/757552

css - 로컬 파일 (서버 없음)의 Internet Explorer“CSS가 MIME 형식이 일치하지 않아 무시되었습니다” -

https://tristan91.tistory.com/608

자원이 MIME 타입(“text/html”)이 일치하지 않아서 (X-Content-Type-Options: nosniff) 차단되었습니다.