由于 MIME 类型错误，html 视图无法加载 css 样式

debugcn 发表于 Dev

克日什托夫·卡钦斯基

我创建了一个超级简单的 express 应用程序，它将从视图目录中显示一个 home.html 视图。home.html显示一切正常，但我没有添加任何 css 样式。在控制台中，我只收到一个错误：

我试图用我发现的堆栈中的另一个答案来解决我的问题：

更改 app.use()
- 从 -> app.use(express.static(path.join(__dirname, 'public')))
- 到-> app.use(express.static(path.join(__dirname + '/public')))

好的，你可以看到我的目录结构是什么样的

正如你所看到的，我创建了公共文件夹，在这个文件夹中我保留了我的 css 样式，所以在 url 下：http://localhost:8080/public/css/style.css我应该看到我的 css 样式但我只能看到错误

但同时在这个 url 下http://localhost:8080/css/style.css我可以找到我的 css 文件

我真的很困惑，我不知道我做错了什么。如果你们中的任何人帮助我，我会很高兴。

应用程序.js

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const flash = require('connect-flash');
const routes = require('./routes/index');
const app = express();

app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(flash());
app.use('/', routes);

module.exports = app;

服务器.js

const app = require('./app');

app.set('port', process.env.PORT || 8080);

const server = app.listen(app.get('port'), () => {
    console.log(`Server is up on ${server.address().port}`);
});

主页.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/public/css/style.css">
    <title>Express</title>
</head>
<body>
    <h1>Express</h1>
</body>
</html>

样式文件

body {
    background: #f6f6f6;
}
h1 {
    color: green;
}

克日什托夫·卡钦斯基

好的，所以我在快速服务器配置方面犯了错误。而不是像这样提供静态文件

app.use(express.static(path.join(__dirname, 'public')));
app.use('/public', express.static(path.join(__dirname, 'public')));

发生这种情况是因为 /public 目录是在根 url 下提供的

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-28

我来说两句

0条评论

登录后参与评论

来自分类Dev

由于MIME类型错误，Nginx无法提供CSS文件

来自分类Dev

CSS无法加载错误的MIME类型Django

来自分类Dev

由于 MIME 类型，首次启动时未加载样式表

来自分类Dev

本地CSS或JS的MIME类型错误阻止使用NodeJ时加载自定义样式

来自分类Dev

由于不允许的MIME类型，无法加载模块脚本

来自分类Dev

由于错误的 MIME 类型（Spring Boot 2、Thymeleaf、Bootstrap），无法加载 javascript 文件

来自分类Dev

SEC7113：由于mime类型不匹配，CSS被忽略

来自分类Dev

样式表 style.css 未加载，因为其 MIME 类型“text/plain”不是“text/css”

来自分类Dev

拒绝从'http：// localhost：3000 / style.css'应用样式，因为它的MIME类型（'text / html'）

来自分类Dev

未加载CSS，因为其MIME类型

来自分类Dev

Nginx-Rails上的Wordpress博客以mime类型text / html加载样式和脚本

来自分类Dev

由于证书错误，无法从鱿鱼加载图像和样式表？

来自分类Dev

Django CSS / JS MIME类型（“ text / html”）不匹配错误

来自分类Dev

Webpack + Keycloak JavaScript：由于MIME类型（“ text / html”），资源被阻止

来自分类Dev

由于不允许的MIME类型（“ application / wasm”），加载模块被阻止

来自分类Dev

HTML字体由于CSS格式无法点击

来自分类Dev

CSS在Django admin中不起作用：由于MIME类型（“ text / html”）不匹配（X-Content-Type-Options：nosniff），[css文件url]中的资源被阻止

来自分类Dev

NodeJS，MIME类型（'text / html'）不是受支持的样式表MIME类型

来自分类Dev

登录 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型

来自分类Dev

为什么此CSS加载了MIME类型“ text / troff”？

来自分类Dev

无法直接设置CSS样式或样式HTML属性

来自分类Dev

CSS-HTML样式元素无法使用样式

来自分类Dev

无法直接设置CSS样式或样式HTML属性

来自分类Dev

由于样式而导致的基本 java 代码错误

来自分类Dev

拒绝应用来自 [Link] 的样式，因为其 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查

来自分类Dev

由于缺少Mime JSON而无法启动rake任务

来自分类Dev

方案由于错误而无法加载

来自分类Dev

由于意外错误，无法加载测试包

来自分类Dev

HTML / CSS列表样式类型不显示

Related 相关文章

文章