MIME-тип
Найдите MIME-тип по расширению файла или найдите расширения для заданного MIME-типа.
О инструменте «MIME-тип»
Определяет MIME-тип, связанный с расширением файла, или работает в обратную сторону — находит расширения, соответствующие заданному MIME-типу. Неверный MIME-тип в конфигурации сервера или заголовке Content-Type приложения может привести к неправильному рендерингу файла браузером, отказу показать его inline, когда следовало бы, или к запросу на скачивание контента, который должен был отобразиться напрямую. Полезно при настройке MIME-соответствий веб-сервера для нестандартного расширения файла.
Некоторые браузеры всё же «принюхиваются» к реальному содержимому файла и переопределяют неверно указанный MIME-тип в качестве запасного варианта для совместимости — но это поведение непоследовательно между браузерами, и именно от такой непредсказуемости избавляет корректный заголовок Content-Type.
Похожие инструменты
Типы, которые важно указать правильно
| Расширение | MIME-тип |
|---|---|
.html | text/html |
.css | text/css |
.js, .mjs | text/javascript (стандартный тип согласно RFC 9239; application/javascript устарел, но работает) |
.json | application/json |
.svg | image/svg+xml |
.webp | image/webp |
.woff2 | font/woff2 |
.wasm | application/wasm |
.webmanifest | application/manifest+json |
.pdf | application/pdf |
Почему неправильный тип всё ломает
- С заголовком
X-Content-Type-Options: nosniffбраузер отказывается выполнять скрипт или применять стили, отданные с неверным типом. JavaScript с типомtext/plainпросто не загрузится. WebAssembly.instantiateStreaming()требует типapplication/wasm.- Откроется ли файл в браузере или скачается, зависит от его типа и заголовка
Content-Disposition. - Для текстовых типов указывайте кодировку:
text/html; charset=utf-8. Отсутствующая или неверная кодировка — классическая причина «кракозябр».
Как настроить на сервере и проверить
- nginx: добавьте соответствие в блок
types { }, напримерtypes { application/wasm wasm; }, или в файлmime.types. - Apache:
AddType application/wasm .wasm - Проверьте, что отдаётся на самом деле:
curl -sI https://example.com/app.wasm | grep -i content-typeили проверка HTTP-заголовков.