NodeJS, MIME type ('text/html') is not a supported stylesheet MIME type

Question

Everytime I connect to my local server on Google Chrome, I get this error :

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

I can access my css file by typing its path so the problem doesn't come from there. I also searched for informations about this topic but nothing worked.

Here's my code

Server Side

const Game = require("./class/game");
const express = require("express");
const app = express();
const serv = require("http").Server(app);

// Server
app.get("/", function(req, res) {
    res.sendFile(__dirname + "/client/index.html");
});
app.use("/client", express.static(__dirname + "/client"));

serv.listen(2000);
console.log("Server started on port 2000");


var io = require("socket.io")(serv, {});
io.sockets.on("connection", function(socket) {
    console.log("Connection done");
});

Client side

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
    <link rel="stylesheet" type="text/css" href="./app.css">
    <title>Games</title>
</head>

<script>
    var socket = io();
</script>

<body>
    test
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: aquamarine;
}

Answer 1

app.css should be served from /client dir. Change href as below

href="/client/app.css">

In your case browser is not able to found the app.css and browser might be receiving a similar response as below

Which is clearly not a valid response and Mime-type for CSS file. That's why you are getting the above error.

As you have defined static content to be served as below

app.use("/client", express.static(__dirname + "/client"));

Changing href /app.css to /client/app.css will solve your issue provided app.css is present in that directory.

NodeJS, MIME type ('text/html') is not a supported stylesheet MIME type

Question

1 answers

solution1
0 ACCPTED 2020-02-15 18:13:42

NodeJS, MIME type ('text/html') is not a supported stylesheet MIME type

Question

1 answers

solution1 0 ACCPTED 2020-02-15 18:13:42

solution1
0 ACCPTED 2020-02-15 18:13:42