尝试加载 css 样式表时出现明确的 MIME 错误

如何解决尝试加载 css 样式表时出现明确的 MIME 错误

在尝试将样式表引入我的应用程序时，我不断收到以下 MIME 错误：

我已经关注有关此 MIME 错误的最新问题数小时了，但没有成功。我已经告诉我的 Express 开发服务器从静态文件中提取资源，但仍然没有运气。这是我的开发层次结构：

我将在下面包含我的代码。任何帮助表示赞赏。

**index.html**
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="description" content="">
    <meta name="subject" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="/public/styles/customStyles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>Clone Application</title>
</head>
<body>

    <div class="conatiner-fluid">

        <nav class="nav-wrapper">
            Hello Again
        </nav>

        Hello World
    </div>

    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>

**Server.js**
const express = require('express');
const app = express();
const router = require("./router");
const path = require("path");

const PORT = 3000; 

app.use(router,express.static('public'));

app.listen(PORT,() => {
    console.log("Listening on port: " + PORT);
});

**router.js**
const express = require('express');
const router = express.Router();

const pages = "/public/pages/";

router.get('/home',(req,res) => {
    res.sendFile(__dirname + "/public/pages/home/index.html")
})

module.exports = router;

解决方法

您的 HTML 链接到 /public/styles/customStyles.css 处的样式表

但是，正确的 URI 是 /styles/customStyles.css（或者最好没有第一个斜杠 styles/customStyles.css，因此如果页面不在根目录中，它将继续工作）。

app.use(router,express.static('public')); 告诉 express 在“public”文件夹下提供静态文件，因此将“public”添加到您的 CSS URI 是不正确的。

由于 Express 默认错误页面（'Cannot GET..'），您得到的是 HTML MIME 类型

尝试加载 css 样式表时出现明确的 MIME 错误

如何解决尝试加载 css 样式表时出现明确的 MIME 错误

解决方法

相关推荐