NodeJS，MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型答案

【问题标题】：NodeJS, MIME type ('text/html') is not a supported stylesheet MIME typeNodeJS，MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型
【发布时间】：2020-05-31 02:18:03
【问题描述】：

每次我在 Google Chrome 上连接到本地服务器时，都会收到此错误：

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.

我可以通过键入它的路径来访问我的 css 文件，这样问题就不会来自那里。我还搜索了有关此主题的信息，但没有任何效果。

这是我的代码

服务器端

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");
});

客户端

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;
}

【问题讨论】：

请记住，如果您的路由是其他路由的子字符串，请按照“最具体”到“最不具体”的路由顺序指定您的路由。而您的/ 总是排在最后，因为否则它会简单地启动所有内容，因为所有内容都以/ 开头。在这种情况下：首先是静态的，然后是您的根。

标签： javascript node.js express server socket.io

【解决方案1】：

app.css 应该从/client 目录提供。如下更改href

href="/client/app.css">

在您的情况下，浏览器无法找到 app.css，并且浏览器可能会收到如下类似的响应

这显然不是 CSS 文件的有效响应和 Mime 类型。这就是您收到上述错误的原因。

因为您已经定义了要提供的静态内容，如下所示

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

将 href /app.css 更改为 /client/app.css 将解决您的问题，前提是该目录中存在 app.css。

【讨论】：

谢谢，因为我是 Node JS 初学者，我还没有真正理解文件是由服务器“发送”的 :)
不用担心你会写更多的代码。但是我的回答解决了你的问题吗？
是的，ty :)
请随意点赞，它会激励我给出更多和最好的答案
已经做了，但我不能，因为我的声望少于 15 :(