堆栈内存溢出
  繁体   English   中英

express.static 和 CSS 文件的 MIME 类型错误

[英]MIME type error with express.static and CSS files

 原文  2018-05-04 19:43:15  6   4    javascript/ html/ css/ express/ static

问题描述

我正在使用快递和节点。 在我的server.js文件中，我有这段代码：

app.use(express.static('/static'));

随后在我的静态目录中，我有一个 CSS 文件夹，然后是一个style.css文件。 在我的index.html ，我像这样链接到工作表：

  <link rel="stylesheet" type="text/css" href="/static/css/style.css">

但是，在我的本地主机中，我继续收到此错误：

拒绝应用来自“ http://localhost:3500/static/css/style.css ”的样式，因为它的 MIME 类型（“text/html”）不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

我确信我的标签中的路径名是正确的，我很困惑为什么我会收到这个错误。 我是否需要声明 CSS 文件被处理为 CSS 而不是 HTML？ 当我说type="text/CSS"时，我不是在这样做吗？ 如果没有，我需要在我的服务器文件中添加什么来解决这个问题？

4 个解决方案

解决方案1
 10 已采纳  2018-05-04 20:01:14

app.use(express.static('/static'));

意味着静态文件是从/static字面上提供的。 在基于 Unix 的操作系统中，这是根目录/的直接子级。 我不认为你这样做，但你不应该存储文件，更不用说该目录中可公开访问的文件了。 相反，您可能正在寻找的是应用程序目录中的static目录。

这是您可以告诉 express 使用该服务器文件的方式：

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

发生 MIME 类型错误是因为所提供的文件可能是 Express 制作的“404 Not Found”页面，因为它无法找到该文件。

如果你不能在你的 HTML 中包含一个文件，那么总是双重检查，甚至最好是三重检查，确保可以首先通过浏览器访问该文件。

此外，文件然后位于 /...，而不是 /static/...

解决方案2
 2  2021-08-08 16:37:35

我知道这个问题很老，但我想用一个简单的例子来补充我的两分钱，因为我花了一段时间才弄清楚这个问题。

工作示例：

我的文件位于/usr/noah

/usr/noah/index.js

const express = require('express')
const path = require('path')
const app = express()
const port = 8080

app.use(express.static(__dirname + '/static'));

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'static/index.html'))
});

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

/usr/noah/static/index.html

<html>

<head>
    <link rel='stylesheet' href='style.css' type='text/css'>
</head>

<body>
    <div id='main'>
        <h1>Hello World</h1>
    </div>
</body>

</html>

/usr/noah/static/style.css

#main {
    margin: 3em;
    padding: 1em;
    border: 1px solid gray;
    border-radius: 10px;
}

h1 {
    color: blue;
}

然后我使用以下命令从/usr/noah运行它： node index.js

说明

我倾向于用例子做得更好，所以就在上面。 要解释发生了什么问题，请参见下文：

app.use(express.static('public'))这在很多 express 文档中都有使用。 只有当您的服务器位于文件系统的根目录时，它才像 alanionita 提到的那样工作得很好。 如您所知，我在/usr/noah两层深。

将此更改为工作示例app.use可确保您的文件从正确的目录提供，在本例中为/usr/noah/static 。

解决方案3
 0  2020-07-01 09:55:36

我有同样的错误，但它是由不匹配的情况引起的。 我在我的 HTML 文件中写道：

<script src = "./myScript.js"></script>

但实际的文件名是MYSCRIPT.js 。 我没有注意到这一点，因为当我在本地打开 HTML 文件时，浏览器似乎忽略了这一点，甚至导入了大小写不匹配的文件。

解决方案4
 0  2020-11-08 21:10:44

我正在使用快递和节点。 在我的server.js文件中，我有这段代码：

app.use(express.static('/static'));

随后在我的静态目录中，我有一个 CSS 文件夹，然后是一个style.css文件。 在我的index.html ，我像这样链接到工作表：

  <link rel="stylesheet" type="text/css" href="/static/css/style.css">

但是，在我的本地主机中，我继续收到此错误：

拒绝应用来自 ' http://localhost:3500/static/css/style.css ' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

我确信我的标签中的路径名是正确的，我很困惑为什么我会收到这个错误。 我是否需要声明 CSS 文件被处理为 CSS 而不是 HTML？ 当我说type="text/CSS"时，我不是在这样做吗？ 如果没有，我需要在我的服务器文件中添加什么来解决这个问题？

解决方案5
 0  2021-06-11 22:57:46

正如其他海报所说，这很少是“实际”的 MIME 类型问题。

通常它是定义错误的公共/静态文件配置和不受欢迎的文件的组合。

回答

示例文件结构

// file structure
public/
  assets/
    css/
      stylesheet.css
    images/
      avater.jpeg
  js/ 
    main.js
controllers/
  user
    createUser.js
    readUser.js
models/
  User.js
  index.js
views/
  layouts/
    main.handlebars
  homepage.handlebars
server.js
app.js

来自 /public 的基本文件服务

来自此处的 Express 文档： https : //expressjs.com/en/starter/static-files.html

app.use(express.static('public'))

这仅在我们的服务器位于文件系统的根目录时才有效，这对于服务器来说很好 - 对于其他任何事情，不是那么多。

动态链接到 /public

app.use(express.static(__dirname + '/public'))

这将从节点应用程序的目录名称构建到 public 的路径。

它将允许我们将项目文件夹放置在驱动器上的任何位置，而不会妨碍运行时。

使用来自 /public 的文件

// homepage.handlebars
<section>
</section>
<script src="/js/main.js"></script>

上述 Express 文档中提供了说明。

// Sample of file paths created by public/
http://localhost:3000/js/main.js

这意味着当我们链接到该文件时，我们只需将/前缀添加到我们的文件/文件夹中。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 express.static，待处理文件 为什么 express.static() 不从正确的路径加载我的 .js 和 .css 文件？ 如何通过express.static将静态CSS添加到Node JS应用 express.static（）不会路由静态文件 express.static() 不从不是“/”的路由器路径中的公共文件夹中提供文件 使用express.static在js文件之前显示和加载html express.static：无法获取/ Express.Static不适用于子目录 express.static（）：“Undefined不是函数” Vuejs 加载 CSS 和 JS 文件给出 MIME 类型错误
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM