Css не был загружен, потому что его mime-тип

Настраиваем маршруты

Пока что у нас имеется только маршрут для обработки запросов по методу к корню приложения «»), однако наш API также должен быть способен обрабатывать запросы HTTP по всем главным методам к различным URL. Мы настроим маршрутизатор (* предоставляет функциональные возможности для обработки ответов) и добавим некоторые выдуманные данные для отправления пользователю.

Давайте создадим новую папку под названием routes и файл под названием routes.js. Мы подключим его вверху app.js.

Обратите внимание на то, что расширение в require указывать необязательно. Теперь мы переместим маршрут для обработки запросов в routes.js

Добавьте следующий код в routes.js:

Наконец, экспортируйте маршрутизатор, чтобы мы могли им воспользоваться в нашем файле app.js

В app.js замените имеющийся код вызовом :

Теперь вы могли бы перейти по и увидеть то же, что и ранее. (Не забудьте перезапустить сервер!)

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

Давайте создадим переменную в routes.js с некоторыми выдуманными пользовательскими данными в формате JSON.

Мы добавим еще один маршрут для обработки запросов по адресу и методу в наш маршрутизатор и будем отправлять с его помощью пользовательские данные.

После перезапуска сервера теперь вы можете перейти по и увидеть все наши данные.

Обратите внимание: если у вас не установлено в браузере расширения для просмотра файлов в формат JSON, то я вам очень рекомендую скачать его, например JSONView для Chrome. Благодаря этому вам будет намного проще читать данные!. Посетите репозиторий GitHub, чтобы ознакомиться с конечным кодом для этого поста и сравните его со своим

Посетите репозиторий GitHub, чтобы ознакомиться с конечным кодом для этого поста и сравните его со своим.

Использование функции автозаполнения в mongoDB

Строка подключения MongoDB программно задана в объявлении свойства . Выполнив инструкции из этого раздела, вы измените код, чтобы получить строку подключения из переменной среды. Вы также узнаете о функции автозаполнения Visual Studio Code.

1. Откройте файл server.js.

2. Замените код

   следующим:

Если при вводе кода вручную (вместо копирования и вставки) поставить точку после , Visual Studio Code отобразит список доступных элементов глобального API process Node.js.

Автозаполнение работает, потому что Visual Studio Code использует TypeScript в фоновом режиме (даже для JavaScript), чтобы передавать информацию о вводе, которая может передаваться в список завершения при вводе. Visual Studio Code может определить, что проект является проектом Node.js, и автоматически скачать файл вводимых элементов TypeScript для Node.js из NPM. Файл вводимых элементов позволяет получить автозаполнение для других глобальных значений Node.js, например и , а также все встроенные модули, такие как и .

Кроме встроенных API-интерфейсов Node.js, функция автоматического получения значений также поддерживает более 2000 модулей сторонних производителей, таких как React, Underscore и Express. Например, чтобы отключить Mongoose от сбоев в примере приложения, если он не может подключиться к настроенному экземпляру базы данных MongoDB, вставьте следующую строку кода в строку 13:

Как и при использовании предыдущего кода, вы получите автозаполнение автоматически.

Модули, которые поддерживает эта функция автозаполнения, можно увидеть в созданном сообществом проекте DefinitelyTyped, который является источником для всех определений типов TypeScript.

Настройка веб-клиента 1С:Предприятие 8.2 под Windows 7 x64 и IIS.

Возникла необходимость отладить небольшую конфигурацию 1С:Предприятие 8.2 под веб-клиентом. Веб сервером был выбран IIS, являющийся самым родным для ОС Windows. Опыт использования этого сервера в Windows XP подсказывал, что с ним будет меньше проблем чем с Apache, но на недавно установленной Windows 7 x64 все оказалось не так просто. Мелкие проблемы начались с момента попытки публикации веб приложения, а после их устранения коснулись уже веб сервера, настройкой которого платформа 1С:Предприятие 8.2 не занимается. Героически победив все свалившиеся напасти, решил скомпоновать и выложить на всеобщее обозрение свои шаги в достижении цели.

Применение генератора приложений

Вы уже должны были установить , читая статью установка среды разработки Node. Напомним, что генератор установлен с помощью менеджера пакетов NPM, при выполнении команды:

имеет ряд параметров, которые можно увидеть, выполнив команду express —help (или express -h):

Команда создаст проект в текущем каталоге с использованием (устаревшего) движка представления Jade и обычного CSS. Если указать express name, проект будет создан в подкаталоге name текущего каталога. 

Можно выбрать движок представления (шаблон), используя — позволяет выбрать движок для создания CSS.

Примечание: Другие опции (, , и пр.) для выбора шаблонизатора устарели. Используйте (или)!

Express-generator даёт возможность сконфигурировать несколько популярных движков, включая EJS, Hbs, Pug (Jade), Twig, и Vash, но по умолчанию  выбран Jade. Экспресс сразу после установки может поддерживать большое количество и других шаблонизаторов.

Примечание: При желании использовать шаблонизатор, который не поддерживается генератором,  просмотрите  документацию Using template engines with Express и документацию для нужного шаблонизатора.

Как правило, следует выбрать шаблонизатор, который имеет всю необходимую вам функциональность и обеспечивает вам высокую производительность — так же, как вы выбираете любой другой компонент! Некоторые критерии для сравнения шаблонизаторов:

Время до  получения результата — если ваша команда уже имела дело с шаблонизатором, то, скорее всего, продуктивнее будет использовать этот шаблонизатор. Если нет, тогда следует учесть  все относительные сложности изучения кандидатов в шаблонизаторы.
Популярность и активность — проверьте популярность движка, возможно, у него есть активное сообщество

Очень важно иметь поддержку для движка, если у вас возникнут проблемы в течении жизни веб-сайта.
Стиль — некоторые шаблонизаторы используют особую разметку для отображения вставленного контента внутри «обычного» HTML, а другие строят  HTML, используя специальный синтаксис (например, используя отступы или блочные имена).
Производительность и время интерпретации.
Особенности — следует выбирать движок  с учётом таких особенностей:
Наследование макета: позволяет определить базовый шаблон и затем наследовать только те части, которые отличаются для конкретной страницы. Это, как правило, лучший подход, чем создание шаблонов путём включения нескольких необходимых компонентов или создания шаблона с нуля каждый раз.
Поддержка «Include»: позволяет создавать шаблоны, включая другие шаблоны.
Краткий синтаксис управления переменными и циклами.
Возможность фильтровать значения переменных на уровне шаблона (например, делать переменные в верхнем регистре или форматировать значение даты).
Возможность создавать выходные форматы, отличные от HTML (например, JSON или XML).
Поддержка асинхронных операций и потоковой передачи.
 Возможность использования как на клиенте, так и на сервере. Возможность применения движка шаблона на клиенте позволяет обслуживать данные и выполнять все действия или их большую часть на стороне клиента.

Совет: В интернете множество ресурсов, которые помогут сравнить различные варианты!

Для этого проекта мы  используем шаблонизатор Pug (в прошлом назывался Jade) — один из популярнейших Express/JavaScript шаблонизаторов, который поддерживается в Express-generator «из коробки».

Express Application Generator позволяет создавать проекты, настроенные для применения шаблонизаторов CSS: LESS, SASS, Compass, Stylus.

Примечание: простой CSS имеет некоторые ограничения, затрудняющие выполнение задач. Шаблонизаторы CSS позволяют использовать более эффективный подход для создании таблиц стилей CSS, но требуют компиляции файлов таблиц стилей в стандартный CSS для применения в браузере.

Как и в случае с шаблонизаторами сайта, следует применять шаблонизатор, обеспечивающий высокую производительность работы. В этом проекте мы используем обычный CSS (по умолчанию), поскольку простота наших требований к CSS не оправдает применение чего-то более сложного.

Сгенерированный код не использует и не содержит в себе какой-либо базы данных. Express может использовать любой движок базы данных, который поддерживается Node (Express не предъявляет каких-либо особых требований к базе данных).

Мы обсудим взаимодействие с базой данных в следующей статье.

5.6. Модель пользователя¶

Модель пользователя немного сложнее, чем модель документа
, так как в ней будет содержаться код связанный с авторизацией.
Я использовал следующую стратегию, которую, вероятно, вы уже видели ранее
в объектно-ориентированных веб фреймворках:

• Пароли хранятся в виде хэша
• Аутентификация выполняется сравнением зашифрованного текста, указанного
  пользователем, и паролем-хэшем, хранящимся в БД для пользователя
• Виртуальное свойство хранит пароль в текстовом виде для
  удобства в формах регистрации и входа
• У свойства есть сеттер, который автоматически конвертирует текст пароля
  в хэш перед сохранением
• Используется уникальный индекс для поля email, чтобы гарантировать, что
  у каждого пользователя свой собственный email

Шифрование пароля использует стандартную Node.js библиотеку :

var crypto = require('crypto');

mongoose.model('User', {
  methods {
    encryptPassword function(password) {
      return crypto.createHmac('sha1', this.salt).
                    update(password).
                    digest('hex');
    }
  }
});

— метод экземпляра, возвращающий sha1-хэш для текстового
пароля и некоторой соли. Соль генерируется перед шифрованием в сеттере пароля:

mongoose.model('User', {
  // ...

  setters {
    password function(password) {
      this._password = password;
      this.salt = this.makeSalt();
      this.hashed_password = this.encryptPassword(password);
    }
  },

  methods {
    authenticate function(plainText) {
      return this.encryptPassword(plainText) === this.hashed_password;
    },

    makeSalt function() {
      return Math.round((new Date().valueOf() * Math.random())) + '';
    },

    // ...

Важность задания правильного MIME типа

Большинство серверов отправляет ресурсы неопределённого типа, как MIME тип. Большинство же браузеров, в целях безопасности, не позволяет их никак обрабатывать, вынуждая пользователя сохранять их на жёсткий диск, для дальнейшего использования.

Несколько советов по правильной настройке MIME типов на серверах:

• RAR-сжатые файлы. В этом случае самым правильным вариантом было бы задать тип изначального ресурса; но это не всегда выполнимо, так как .RAR файлы могут хранить в себе несколько типов данных. Тогда, настройте сервер на отправку MIME типа вместе с RAR ресурсами.
• Аудио и видео. Только ресурсы с правильно заданными MIME типами могут производиться в и элементах. Убедитесь, что вы используете правильные типы для аудио и видео данных.
• Запатентованные типы файлов. Избегайте использования при их отправке, так как большинство браузеров не позволит определять способы обработки (например, «Открыть в Word») для этого базового MIME типа. Используйте специальные типы, например , чтобы позволить пользователям открывать загруженный ресурс в программе по их выбору.

Что произойдет после того, как вы увидите ошибку «Не удалось установить пакет»?

Папка темы без таблицы стилей style.css бесполезна, по крайней мере, когда дело доходит до ее загрузки в WordPress и создания полнофункциональной темы.

Невозможно загрузить корневой каталог, так как WordPress блокирует все попытки загрузить файл без таблицы стилей style.css. Причина этого в том, что отсутствующая таблица стилей может сломать или повредить всю инфраструктуру WordPress.

Хорошей новостью является то, что любая тема, ранее активированная на вашем сайте WordPress, остается на месте. Вашему сайту не будет причинен вред, и вы не сможете загрузить эту новую тему.

Если вы настаиваете на установлении этой темы, важно пройти через следующие решения, чтобы заменить старую и установить новую тему

Другие методы сообщения о типе ресурса

MIME типы не являются единственным способом сообщения типа документа:

• Суффиксы в названиях файлов могут указывать на тип документа, главным образом на Microsoft Windows. Но не все операционные системы могут считать их имеющими смысл (например, Linux или MacOS). А так же нет никакой гарантии, что они будут указывать на правильный тип.
• Магические числа. Синтаксисы различных форматов позволяют узнавать их тип, через анализ их структуры байтов. Например, GIF файлы начинаются с шестнадцатеричного значения (), а PNG файлы с (). Опять же, не все типы документов имеют магические числа, так что этот подход так же не надёжен на 100%.

Сессии (основы, express-session)

Сессия нужна для того, чтобы не терять пользователя при серфинге на вашем сайте. Сессия ставится по куке. При перезагрузке сервера кука сессии может поменяться, поэтому иногда сессии хранятся в БД.

Подключаем пакет .

Настраиваем сессию при помощу пакета , далее добавляем сессии переменную :

const session = require('express-session');

app.use(session({
    secret: 'secretWord',   // секретное слово для шифрования
    key: 'key',             // имя куки
    cookie: {
        path: '/',          // где действует
        httpOnly: true,     // чтобы куку не могли читать на клиенте
        maxAge: null        // время жизни куки
    },
    saveUninitialized: false,   // on default
    resave: false               // on  default
}));



app.all('/', function (req, res, next) {

    // в независимости от логина или нет получаем id
    console.log(req.session.id);

    // в сессию мы можем проставлять кастомные переменные
    req.session.views = req.session.views === void 0
        ? 0
        : req.session.views;
    req.session.views++;
    next();
})

Простая система управления доступом к страницам сайта на основе , которую ставим на основе простого post-запроса:

const express = require('express');
const router = express.Router();

const isAdmin = (req, res, next) => {
    // если в сессии текущего пользователя есть пометка о том, что он является
    // администратором
    if (req.session.isAdmin) {
        // то всё хорошо :)
        return next();
    }
    // если нет, то перебросить пользователя на главную страницу сайта
    res.redirect('/');
};

router.get('/', (req, res, next) => {
    res.render('pages/index', {title: 'My session', views: req.session.views});
});

router.post('/', (req, res, next) => {
    req.session.isAdmin = true;
    res.redirect('/secret');
});

router.get('/secret', isAdmin, (req, res, next) => {
    res.render('pages/secret');
});

module.exports = router;

2 ответа

Лучший ответ

Что делает метод app.use?

У Express есть , который можно настроить с помощью app.configure, где мы можем вызвать use . используется маршрутами, давайте возьмем, я назвал который добавил этот слой в мой стек. Это гарантирует, что для всех входящих запросов сервер анализирует тело, за которым заботится. Это происходит потому, что мы добавили слой к нашему .

Что означает метод express.static? и куда указывает __dirname?.

Код создает сервер Express, добавляет статический и, наконец, начинает прослушивать порт или предоставленный порт.

Приведенный выше код эквивалентен приведенному ниже, который вы понимаете.

Статическое промежуточное ПО обрабатывает подачу контента из каталога. В этом случае корневая директория обслуживается, и любой контент (HTML, CSS, JavaScript) будет доступен. Это означает, что корневой каталог выглядит так:

Для получения дополнительных ссылок на ту же тему ниже приведены ссылки на переполнение стека.

• Экспресс app.use
• Что на самом деле middleware и app.use означают в Expressjs?

22

Community
23 Май 2017 в 11:46

В Node — это глобальный объект, который содержит имя каталога, из которого находится исполняемый скрипт. Например, если вы запускаете из , то будет содержать .

Метод — это функция, унаследованная от среды Connect, на которой написана среда Express. Метод присоединяет функцию промежуточного программного обеспечения к стеку приложений, который запускается каждый раз, когда Express получает запрос.

Код, который вы показали, монтирует статический сервер по пути , который читает из каталога, из которого выполняется скрипт:

Если вам нужно изменить путь на , статический файловый сервер будет вместо этого обслуживать статические файлы с этого пути. Если вы не укажете путь, по умолчанию используется .

Что касается того, что делает сам, он принимает путь и возвращает функцию промежуточного программного обеспечения, которая прослушивает запросы. Вот как работает промежуточное ПО:

1. Проверьте, является ли метод запроса или . Если нет, игнорируйте запрос.
2. Разберите путь и приостановите запрос.
3. Проверьте, есть ли перенаправление по умолчанию. Если это так, перенаправьте с помощью .
4. Определите обработчики, если каталог или ошибка встречаются.
5. Передайте все в модуль send для идентификации MIME и предоставления файлов.

Вот источник промежуточного программного обеспечения из Connect для справки:

22

hexacyanide
20 Сен 2013 в 00:34

Локальная полностековая отладка в Visual Studio Code

Как упоминалось выше, приложение со списком задач — это приложение MEAN, то есть приложение, интерфейс и серверная часть которого написаны с помощью JavaScript. То есть, если вы выполняете отладку серверного кода (Node/Express), в определенный момент может потребоваться отладить код интерфейса (Angular). Для этого в Visual Studio Code есть множество расширений, в том числе встроенная отладка Chrome.

Перейдите на вкладку расширения и введите в поле поиска:

Выберите расширение с именем Отладчик для Chrome и выберите Установить. Установив расширение отладки Chrome, щелкните Перезагрузить, чтобы закрыть и снова открыть Visual Studio Code для активации расширения.

Хотя вы смогли выполнить и отладить код Node.js без специальной настройки Visual Studio Code, чтобы отладить внешнее веб-приложение, необходимо создать файл launch.json, который сообщает Visual Studio Code, как запускать приложение.

Установка

Для начала нам необходимо убедиться, что Node.js и npm установлены глобально на нашем компьютере. Мы можем это проверить при помощи выполнения команды с флажком , в результате чего будут показаны установленные версии этих инструментов. Откройте вашу консоль и введите туда следующую команду:

Версии, установленные на вашем компьютере, могут слегка отличаться от тех, что установлены у меня, однако если оба инструмента имеются, то можем приступить.

Давайте создадим папку проекта под названием и перейдем в нее.

Теперь, когда мы в ней, мы можем инициализировать наш проект, выполнив команду init.

В результате вам будет предложен ряд вопросов о проекте, на которые вы можете как отвечать, так и нет. После настройки у вас будет файл package.json, который выглядит следующим образом:

Теперь, когда у нас есть package.json, мы можем установить зависимости, необходимые для нашего проекта. К счастью, нам нужны только следующие:

• body-parser – промежуточное ПО для разбора тела запросов;
• express – веб-фреймворк с самым необходимым функционалом, который мы будем использовать для создания нашего сервера;
• mysql:  драйвер MySQL;
• request (необязателен) – легкий способ выполнения запросов HTTP;

Мы воспользуемся командой , за которой будут следовать все зависимости, для завершения настройки нашего проекта.

В результате будут созданы файл package-lock.json, папка node_modules, и package.json теперь будет выглядеть подобно следующему:

Создание проекта

Разрабатывая пример — приложение Local Library, мы построим проект с именем express-locallibrary-tutorial. Используем библиотеку шаблонов Pug, а движок CSS применять не будем.

Выберем место для нового проекта — каталог express-locallibrary-tutorial — и выполнимкоманду:

Будет создан каталог express-locallibrary-tutorial и выведен список созданных внутри каталога проектных файлов.

После списка файлов генератор выведет инструкции для установки зависимостей (указанных в файле package.json) и запуска приложения (инструкции предназначены для Windows; для Linux/Mac OS X они могут слегка отличаться).

8 ответов

Лучший ответ

Я просто столкнулся с той же проблемой. Похоже, это Экспресс, который может проявиться по нескольким причинам, судя по количеству обращений к поиску. веб для «nodejs express css mime type».

Несмотря на атрибут , который мы вставили в наши элементы , Express возвращает файл CSS как

В то время как это действительно должно возвращать это как

Для меня быстрым и грязным обходным решением было просто удалить атрибут , то есть изменить

Кому

Тестирование подтвердило, что файл CSS был загружен, и стили действительно работали, и этого было достаточно для моих целей.

39

Gord Thompson
15 Июл 2017 в 18:58

В некоторых ответах предлагалось удалить rel = «stylesheet», однако это не сработало для меня. Согласно документации expressjs: https://expressjs.com/en/starter/static-files .html использовать функцию для обслуживания статических файлов, таких как CSS, JavaScript и т. д.

И оттуда вы сможете загрузить любой файл из публичного каталога например, если у вас есть файл style.css внутри каталога

будет работать.

8

motash
21 Апр 2019 в 23:09

В моем случае я перемешал блоки кода ниже в обратном порядке, поэтому я получил эту ошибку. Если у вас есть эта проблема, следуйте приведенному ниже порядку, и это может помочь

1 .

2 .

3 .

-1

sudhee
25 Авг 2019 в 14:57

То, что, казалось, работало для меня, менялось

Кому

Νίκος Δημητρακόπουλος
26 Апр 2020 в 18:12

Была похожая проблема с файлом javascript (в отличие от css) в приложении Angular. В действительности проблема была не в типе Mime (как указано во внешнем сообщении об ошибке), а в конечном итоге к ошибке «404 Not Found».

В моем случае размещение файла сценария в любом месте, кроме папки «assets», привело к ошибке 404 и, в конечном итоге, к ошибке mime-типа. Следующий тег работал для меня в разделе заголовка index.html:

Папка assets является родственным файлом Index.html.

1

DaveIIi
7 Июл 2019 в 19:22

Это решило мою проблему:

1

Kirankumar Gonti
14 Фев 2020 в 16:27

Работая с такой же проблемой для веб-приложения с полным стеком (в разработке), я просто решил проблему, правильно связав файл css с отображаемой страницей. Удаление , как предложено выше, предотвращает появление ошибки в браузере, но не загружает стили, которые должны быть применены к странице. Короче говоря, это не решение.

Если вы используете , вы можете использовать это как пример:

Серверный :

на стороне клиента :

Просто добавьте косую черту перед файлом, который вы хотите связать с html-страницей (если вы рендерите html-страницы без использования ), и express-static сделает все остальное автоматически за вас.

4

rags2riches
27 Май 2019 в 21:03

Я также удалил и больше не получаю ошибку типа MIME, но стили не загружаются

13

Fer Cervantes
3 Дек 2017 в 19:08

Создание сервера Express

Прежде чем продолжать, нужно создать для сервера JS-файл. Выполните в терминале следующую команду:

Теперь откройте этот файл и пропишите в нем:

Что эти строки делают?

1. Первая импортирует Express в проект, чтобы его можно было использовать. При каждом добавлении в проект пакета необходимо импортировать его туда, где он будет использоваться.
2. Вторая строка вызывает функцию , которая создает новое приложение, после чего присваивает результат константе .

Создание маршрутов и прослушивание порта

Говоря простым языком, маршрут представляет конечную точку, к которой могут обращаться пользователи. Он ассоциируется с HTTP-глаголом (например, GET, POST и пр.) и получает путь URL. Кроме того, он получает функцию, которая вызывается при обращении к этой конечной точке.

Пропишите в файле следующий код:

Разберем его согласно приведенной ранее структуре:

• Он связан с HTTP-глаголом  —  в данном случае GET.
• Он получает URL  —  здесь это домашняя страница ().
• Он получает функцию, которая будет вызываться при обращении к конечной точке.

Следовательно, когда пользователь выполняет запрос к домашней странице, т.е. , вызывается стрелочная функция и отображается фраза “Hello WWW!”

Последним шагом подготовки сервера к работе будет настройка слушателя. Понадобится указать для приложения конкретный порт. Напишите нижеприведенный код в конец JS-файла.

Чтобы иметь возможность запускать сервер, вам нужно будет вызывать метод . При этом вы также можете изменить номер порта (3333) на любой другой.

Доступ к приложению в браузере

Для запуска приложения выполните в терминале . Имейте в виду, что  —  это произвольное имя, которое я выбрал для данного урока, так что можете назвать его или как-угодно иначе.

Теперь, когда сервер запущен, можно обратиться к нему в браузере. Перейдите по адресу , перед вами должно отобразиться следующее сообщение:

Скриншот приложения

Вы отлично справились с настройкой веб-сервера Node.js + Express. В следующем разделе мы настроим статическое содержимое, а именно JavaScript, CSS, HTML, изображения и т.д.

Заключение

К завершению статьи у вас должно получиться простое веб-приложение.

В этом уроке мы узнали:

• о Node.js;
• об Express и о том, как использовать его для создания небольшого веб-приложения;
• как создавать маршруты;
• как настраивать статическое содержимое в приложении Node.js + Express;
• как передавать простой HTML-файл в Express.

• Создаем Telegram-бота с помощью Node.js за 3 минуты
• Найти и обезвредить: утечки памяти в Node.js
• Создание многопользовательской игры с использованием Socket.io при помощи NodeJS и React

Читайте нас в Telegram, VK и

Перевод статьи Catalin Pit: Node.js + Express Tutorial for 2021 — Build a Web Server Using Node.js and Express