Node/Express - отказ от применения стиля, потому что его тип MIME ('text/html')

У меня была эта проблема за последние пару дней, и я не могу понять ее. Мы делаем очень базовое приложение node/express и пытаемся обслуживать наши статические файлы, используя что-то вроде этого:

app.use(express.static(path.join(__dirname, "static")));

Это делает то, что я ожидаю от него по большей части. У нас есть несколько папок в нашей статической папке для наших css и javascript. Мы пытаемся загрузить наш css в наш EJS-просмотр, используя этот статический путь:

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

Когда мы попадаем в наш маршрут /, мы получаем весь контент, но наш CSS не загружается. Мы получаем эту ошибку, в частности:

Отказался от применения стиля от " http://localhost: 3000/css/style.css ", потому что его тип MIME ("text/html") не поддерживается MIME-типом поддерживаемых стилей, а строгая проверка MIME включена.

Что я пробовал:

  1. Очистить кеш NPM/Fresh Install
    • npm verify cache
    • rm -rf node_modules
    • npm install
  2. Очистить кеш браузера
  3. Различные модификации имен папок и ссылок на
  4. Добавление/удаление косых черт из href
  5. Перемещение папки css в корневой каталог и оттуда
  6. Добавление/удаление path.join(__dirname, '/static/') из path.join(__dirname, '/static/')
  7. Был комментарий о сервисном работнике, который, возможно, испортил ситуацию в отчете о выпуске github, и, похоже, решил множество проблем с людьми. Для нашего localhost нет сервисного работника: https://github.com/facebook/create-react-app/issues/658
    • Мы не используем реакцию, но я хватаюсь за любой поиск в Google, который я могу найти

Маршрут:

app.get("/", function(req, res) {
    res.render("search");
});

Вид:

<!DOCTYPE html>
<html>
    <head>
        <title>Search for a Movie</title>
        <link rel="stylesheet" type="text/css" href="/static/css/style.css">
    </head>
    <body>
        <h1>Search for a movie</h1>
        <form method="POST" action="/results">
            <label for="movie-title">Enter a movie title:</label><br>
            <input id="movie-title" type="text" name="title"><br>
            <input type="submit" value="Submit Search">
        </form>
    </body>
</html>

Пакет.json:

{
  "name": "express-apis-omdb",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js",
    "lint:js": "node_modules/eslint/bin/eslint.js ./ ./**/*.js --fix; exit 0",
    "lint:css": "node_modules/csslint/cli.js public/css/; exit 0"
  },
  "license": "ISC",
  "devDependencies": {
    "babel-eslint": "^6.0.4",
    "csslint": "^0.10.0",
    "eslint": "^2.11.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.8.1",
    "eslint-plugin-jsx-a11y": "^1.3.0",
    "eslint-plugin-react": "^5.1.1"
  },
  "dependencies": {
    "body-parser": "^1.18.2",
    "dotenv": "^5.0.0",
    "ejs": "^2.5.7",
    "express": "^4.13.4",
    "morgan": "^1.7.0",
    "path": "^0.12.7",
    "request": "^2.83.0"
  }
}

Структура проекта:

-app
--node_modules
--static
---img
---css
---js
--views
---movie.ejs
---results.ejs
---search.ejs
--index.js
--package-lock.json
--package.json

Примечание. В настоящее время мы не используем файл макета для нашего EJS.

Я рад предоставить дополнительные данные, если это необходимо.

Ответы

Ответ 1

Проблема связана с неправильным именем файла. У нашего ученика было место в конце файла style.css. Было несколько советов о том, что первое: отсутствие подсветки синтаксиса в текстовом редакторе, а второй - текстовый редактор, определяющий тип файла для других вновь созданных файлов css, но не неназванный файл. Снятие пространства разрешило проблему.

Спасибо, спалбетман за вашу помощь, указав на меня в правильном направлении.

Ответ 2

Это не решение для вашего вопроса, но это может помочь кому-то еще, ищущему решение, как я. если вы используете app.get, как показано ниже:

app.get(express.static(path.join(__dirname,"public")));

измените это на:

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

Ответ 3

В приложении NOdejs с Express нам нужно добавить строку, как показано ниже, чтобы сообщить серверу о каталоге

app.use(express.static(__dirname));

Это решит проблему не рендеринга CSS