#javascript #html #css
Вопрос:
Меня, вероятно, разорвут в клочья за этот вопрос, но поехали.
Мы все видели ужасное:
Refused to apply style from <URL> because its MIME type <TYPE> is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Его происхождение и исправление, как правило, ориентированы на проект, и бесчисленные ответы на StackOverflow предлагают бесчисленные решения, многие из которых не могут быть применены в общем виде. Вот странная ситуация, которую я, кажется, не могу понять, учитывая, что я в основном работаю на заднем плане:
<link type="text/css" rel="stylesheet" th:href="@{/real-fun/css/stylesheet.css}">
<link type="stylesheet/css" rel="stylesheet" th:href="@{/real-fun/css/tail.select-light.css}">
Я использую Thymeleaf в качестве выбранного механизма визуализации на стороне шаблона/сервера. Хотя он и не идеален, он выполняет эту работу за меня — отсюда th:href атрибуты вместо обычных и @{} синтаксис.
Вот в чем дело — первый файл должен быть загружен как "text/css" в противном случае, браузер отказывается применять свой стиль, в то время как второй файл должен быть загружен как "stylesheet/css" , в противном случае браузер блокирует это.
В обоих случаях он утверждает, что файлы имеют "application/json" тип, и ни один из них таковым не является.
В этом сценарии первый не будет загружаться, но второй будет:
<link type="stylesheet/css" rel="stylesheet" th:href="...">
<link type="stylesheet/css" rel="stylesheet" th:href="...">
В этом случае второй не будет загружаться, но первый будет:
<link type="text/css" rel="stylesheet" th:href="...">
<link type="text/css" rel="stylesheet" th:href="...">
Что дает и как мне определить, какой тип MIME ожидается до того, как браузер получит удар?
Комментарии:
1. Тип mime зависит от того, как сервер доставляет файл, а не от
<link>тега.rel=stylesheetэто все, что вам нужно, если сервер правильно настроен. Используйте инструмент разработчика «Сеть» вашего браузера, чтобы посмотреть, как выглядят HTTP-ответы для таблиц стилей, которые не работают.2. @Pointy, спасибо за совет! Я проверю это и свяжусь с вами.
3. @admcfajn — пути верны. Это распространенная проблема в большинстве вопросов/ответов. Это не имеет никакого отношения к пути — они оба загружаются правильно, используя один и тот же путь. Единственная переменная, которая изменяется, — это
relатрибут.4. Спасибо, да, перечитал ваш вопрос и увидел @{} … Я на 99,9% уверен, что
stylesheet/cssэто неверно, и так должно быть всегдаtext/css. Дикое предположение: что произойдет, если вы перейдетеtail.select-light.cssнаtail-select-light.css?5. @admcfajn Тот же результат, он отказывается применять стиль из
"application/json"типа MIME
Ответ №1:
Итак, я понятия не имею, почему или как это что-то исправило, но это так.
Там был файл, дублированный tail-select.js , который импортировался tail.select.js . Это два разных файла, и tail.select.js это фактический файл JS для библиотеки.
Хотя tail.select.js и не зависело от tail-select.js этого — этот импорт как-то повлиял на него. После удаления tail-select.js файла, который, похоже, ошибочно попал в проект — файл CSS загружается правильно, через rel="text/css" .
Я не понимаю, как файл JS, импортирующий другой файл и ничего с ним не делающий, смог взломать импортированный файл, и, кроме того, как это изменило способ загрузки файла CSS. Тем не менее, это (каким-то образом) работает сейчас, и я боюсь задавать еще какие-либо вопросы.