尝试使用Heroku打开引导程序模板时出现MIME类型错误

Question

我正在创建一个使用bootstrap模板的项目组合，但是当我尝试使用heroku打开它时，我收到以下错误:拒绝应用来自'‘的样式，因为它的MIME类型('text/html')不是支持的样式表MIME类型，并且启用了严格的MIME检查。

这似乎是一个快速服务器的错误，但我不确定是什么…当我尝试查看css时，虽然出现了错误，但代码却显示为“Cannot GET”。

我使用的是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

Answer 1

以前遇到过这个问题，如果您的任何CSS文件以注释开头，请尝试删除它们。我注意到，有时它会将它们视为CSS以外的其他内容，并且不会加载CSS文件。

不管怎么说，这对我很管用。

Answer 2

向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