时间戳

首页 > 解决方案 > 当我尝试加载 css 样式表时出现快速 MIME 错误

javascript - 当我尝试加载 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;

标签： javascripthtmlcssexpressweb-development-server

解决方案

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

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

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

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

推荐阅读