Ошибка типа MIME при попытке открыть шаблон начальной загрузки с помощью Heroku

Question

Я создаю портфель, используя шаблон начальной загрузки, однако, когда я пытаюсь открыть его, используя heroku, я получаю эту ошибку для всех моих css: отказался применять стиль из '', потому что его тип 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