尝试使用 Heroku 打开我的引导模板时出现 MIME 类型错误答案

【问题标题】：MIME type error when trying to open my bootstrap template with Heroku尝试使用 Heroku 打开我的引导模板时出现 MIME 类型错误
【发布时间】：2019-06-03 07:25:10
【问题描述】：

我正在使用引导模板创建一个投资组合，但是当我尝试使用 heroku 打开它时，我的所有 css 都会出现此错误：拒绝应用来自 '' 的样式，因为它的 MIME 类型（'text/html'）不是支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

这似乎是快递服务器的错误，但我不确定是什么......当我尝试查看 css 虽然错误我应该看到代码但它显示“无法获取”

我正在使用 mac 并尝试在 google chrome 上运行，并尝试使用 safari 打开，但仍然是同样的问题。

// 这是我的 server.js 代码 //

var express = require('express');
var port = process.env.PORT || 3000;
var app = express();

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

app.use(express.static(__dirname + '/lib'));
app.use(express.static(__dirname + '/lib/bootstrap/css/bootstrap.min.css'));
app.use(express.static(__dirname + '/lib/ionicons/css/ionicons.min.css'));
app.use(express.static(__dirname + '/lib/owlcarousel/assets/owl.carousel.min.css'));
app.use(express.static(__dirname + '/lib/magnific-popup/magnific-popup.css'));
app.use(express.static(__dirname + '/lib/hover/hover.min.css'));
app.use(express.static(__dirname + '/lib/magnific-popup/magnific-popup.css'));


app.get('/', function (req, res) {
    res.sendfile('./public/index.html');
});


app.listen(port, function () {
    console.log('Listening on Port ' + port);
});

// 这是我引用 css 的标题，也是我的文件布局 //

https://imgur.com/a/fQ26xQQ

【问题讨论】：

标签： javascript css express server static

【解决方案1】：

为express.static提供回调函数，以便设置Content-Type标头

var express = require('express');
var port = process.env.PORT || 3000;
var app = express();

function optionHeaders(){
  return {
        setHeaders: function (res, path, stat) {
             var extenstions = path.split('.');
             res.set('Content-Type', 'text/' + extenstions[extenstions.length -1]);
        }
  }
}
app.use(express.static(__dirname + '/dist',optionHeaders()));    
app.use(express.static(__dirname + '/lib',optionHeaders()));        
app.get('/', function (req, res) {
    res.sendfile('./public/index.html');
});        
app.listen(port, function () {
    console.log('Listening on Port ' + port);
});

在 expressjs 文档中了解更多信息 - https://expressjs.com/en/api.html#setHeaders

【讨论】：

【解决方案2】：

以前遇到过这个问题，如果您的任何 CSS 文件以 cmets 开头，请尝试删除它们。我注意到有时它会将它们视为 CSS 以外的东西，因此不会加载 CSS 文件。

无论如何都为我工作。

【讨论】：