Ресурс интерпретируется как таблица стилей, но передается с типом MIME text / html (кажется, не связан с веб-сервером)
У меня есть эта проблема. Chrome продолжает возвращать эту ошибку
ресурс интерпретируется как таблица стилей, но передается с помощью типа MIME text / html
файлы, затронутые этой ошибкой, - это только стиль, выбранный и jQuery-gentleselect (другие CSS-файлы, импортированные в индекс таким же образом, работают хорошо и без ошибок). Я уже проверил свой тип MIME, а text / css уже на CSS.
честно говоря, я хотел бы начать с понимание проблемы (то, что, кажется, я не могу сделать в одиночку).
24 ответов
Я хотел бы начать с понимания задачи
браузера HTTP-запросы к серверам. Затем сервер делает HTTP-ответ.
оба запроса и ответа состоят из кучки заголовков и (иногда необязательного) тела с некоторым содержимым в нем.
если есть тело, то один из заголовков -Content-Type
который описывает, что такое тело (это HTML-документ? Образ? Содержание формы представления? п.)
когда вы запрашиваете таблицу стилей, ваш сервер сообщает браузеру, что это HTML-документ (Content-Type: text/html
) вместо стилей (Content-Type: text/css
).
Я уже проверил мой myme.тип и текст / css уже находятся на css.
тогда что-то еще о вашем сервере делает эту таблицу стилей с неправильным типом контента.
используйте вкладку Net инструментов разработчика Вашего браузера для изучения запроса и ответ.
С Помощью Угловых?
Это очень важное предостережение, чтобы помнить.
базовый тег должен быть не только в голове, но и в нужном месте.
У меня был мой базовый тег в неправильном месте в голове, он должен быть перед любыми тегами с url-запросами. В основном размещение его в качестве второго тега под заголовком решило это для меня.
<base href="/">
Я написал небольшой пост на нем здесь
У меня также была проблема с этой ошибкой, и я нашел решение. Это не объясняет, почему произошла ошибка, но, похоже, в некоторых случаях она исправлена.
включить косую черту / перед путем к файлу css, например:
<link rel="stylesheet" href="/css/bootstrap.min.css">
попробуй такое <link rel="stylesheet" type="text/css" href="../##/yourcss.css">
здесь ##
ваша папка, в которой находится ваш .CSS - файл
не забывайте: ..
(две точки).
Я также столкнулся с той же проблемой. И после этого некоторые R&D, я обнаружил, что проблема была с именем файла. Имя фактического файла было "lightgallery.css" но при связывании я набрал "lightGallery.css".
Подробнее:
Он хорошо работал на моем localhost (OS: Windows 8.1 & Server: Apache). Но когда я загрузил свое приложение на удаленный сервер (другой OS & Web-сервер, чем мой localhost), это не работай, дай мне ту же ошибку, что и тебе.
таким образом, проблема заключалась в чувствительности к регистру (в отношении имен файлов) сервера.
@Роб Седжвик дал мне указатель, однако, в моем случае мое приложение была Приложение Spring Boot. Поэтому я просто добавил исключения в свою конфигурацию безопасности для путей к соответствующим файлам...
Примечание - это решение на основе SpringBoot... То, что вам может понадобиться, может отличаться в зависимости от того, какой язык программирования вы используете и/или какой фреймворк вы используете
, однако, отметить, есть;
существенно проблему можно причинить когда каждый запрос, включая те, что для статического контента, аутентифицируются.
Итак, скажем, некоторые пути к моему статическому контенту, которые вызывали ошибки, следующие;
путь под названием "Плагины"
http://localhost:8080/plugins/styles/css/file-1.в CSS
и путь под названием "страницы"
http://localhost:8080/pages/styles/css/style-1.в CSS
затем я просто добавляю исключения следующим образом в моей конфигурации безопасности Spring Boot;
@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers(<comma separated list of other permitted paths>, "/plugins/**", "/pages/**").permitAll()
// other antMatchers can follow here
}
}
исключая эти пути
"/plugins/**"
и "/pages/**"
от аутентификации сделал ошибки уйти.
Ура!
основываясь на других ответах, похоже, что у этого сообщения много причин, я думал, что просто поделюсь своим индивидуальным решением, если у кого-то есть моя точная проблема в будущем.
наш сайт загружает CSS-файлы из дистрибутива AWS Cloudfront,который использует ведро S3 в качестве источника. Это конкретное ведро S3 было синхронизировано с сервером Linux под управлением Jenkins. The через s3cmd
устанавливает тип содержимого для объекта S3 автоматически на основе того, что говорит ОС (предположительно, на основе расширения файла). По какой-то причине, на нашем сервере, все типы были установлены правильно, кроме .css
файлы, которые он дал типа text/plain
. В S3, когда вы проверяете метаданные в свойствах файла, вы можете установить тип на все, что хотите. Установка его в text/css
позволил нашему сайту правильно интерпретировать файлы как CSS и правильно загружать.
Используя Angular
в моем случае, используя ng-href
вместо href
решил это за меня.
Примечание :
Я работаю с laravel в качестве бэк-энда
установка анонимных учетных данных аутентификации в Идентификатор Пула Приложений сделал трюк для меня.
мой вопрос был проще, чем все ответы в этом посте.
Мне пришлось настроить IIS для включения статического содержимого.
у меня есть аналогичная проблема в MVC4 с использованием проверки подлинности форм. Проблема была в этой строке в интернете.config,
<modules runAllManagedModulesForAllRequests="true">
Это означает, что каждый запрос, в том числе для статического содержимого, аутентификации.
измените эту строку:
<modules runAllManagedModulesForAllRequests="false">
я столкнулся с тем же самым, с тем же самым .htaccess файл для создания красивых URL-адресов. после нескольких часов поисков и экспериментов. я узнал, что ошибка была из-за относительно связывания файлов.
браузер начнет получать один и тот же исходный html-файл для всех css, js и файлов изображений, когда я буду просматривать несколько шагов вглубь сервера.
чтобы противостоять этому, вы можете использовать <base>
тег на вашем html источник
<base href="http://localhost/assets/">
и ссылка на такие файлы, как,
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/script.js"></script>
или использовать абсолютные ссылки для всех ваших файлов.
<link rel="stylesheet" type="text/css" href="http://localhost/assets/css/style.css" />
<script src="http://localhost/assets/js/script.js"></script>
<img src="http://localhost/assets/images/logo.png" />
Если вы находитесь на JSP, эта проблема может возникнуть из вашего сопоставления сервлетов. если ваше отображение принимает url по умолчанию, как это:
@WebServlet("/")
затем контейнер интерпретирует Ваш url css и переходит к сервлету вместо перехода к файлу css.
У меня была такая же проблема, я поменял свое отображение и теперь все работает
в случае, если кто-то приходит на этот пост и имеет аналогичную проблему. Я только что испытал подобную проблему, но решение было довольно простым.
разработчик по ошибке уронил копию интернета.config в каталог CSS. После удаления все ошибки были устранены и страница отображена правильно.
я столкнулся с той же проблемой при возобновлении работы над старым проектом среднего стека. Я использовал nodemon
как мой локальный сервер разработки и получил ту же ошибку Resource interpreted as stylesheet but transferred with MIME type text/html
. Я изменился с nodemon
до http-server
где можно найти здесь. Это сразу же сработало для меня.
Это потому,что вы должны установить тип контента как text/html вместо text/css для вашей страницы сервера (php, node.с JS и т. д.)
Это произошло, когда я удалил протокол из ссылки css для таблицы стилей css, обслуживаемой Google CDN.
это не дает никакой ошибки:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Architects+Daughter">
но это дает ошибку ресурс интерпретируется как таблица стилей, но передается с помощью типа MIME text / html :
<link rel="stylesheet" href="fonts.googleapis.com/css?family=Architects+Daughter">
Я столкнулся с аналогичной проблемой. И изучение решений на этой фантастической странице переполнения стека.
ответ user54861 (несоответствие имен в случае сенситивности) заставляет меня любопытно проверить мой код снова и понял, что"Я не загрузил два JS-файла, которые я загрузил в head tag". :-)
когда я загрузил их проблема убегает ! И код запускается и страница отображается без каких-либо других ошибок!
Итак, мораль истории-не забывайте чтобы убедиться, что все ваши JS файлы загружаются где на странице их искать.
Я столкнулся с той же проблемой с приложением .NET, открытым исходным кодом CMS под названием MojoPortal. В одной из моих тем и кожи для конкретного сайта, при просмотре или тестировании он будет измельчать и замедляться, как будто он задыхается.
моя проблема не была атрибутом " type "для CSS, но это была"та другая вещь". Мое точное изменение было в Web.Config. Я изменил все значения на FALSE для MinifyCSS, CacheCssOnserver и CacheCSSinBrowser.
раз это было установлено, что веб-сайт был быстрым еще раз в производстве.
Я хочу расширить точку Тодда R в OP. В asp.net страницы,web.config
file определяет разрешения, необходимые для доступа к каждому файлу или папке в приложении. В нашем случае папка CSS-файлов не допускала доступа для неавторизованных пользователей, что приводило к сбою на странице входа до авторизации пользователя. Изменение необходимых разрешений в web.config
разрешил несанкционированным пользователям доступ к CSS-файлам и решил эту проблему.
была такая же ошибка, потому что я забыл отправить правильный заголовок первого
header("Content-type: text/css; charset: UTF-8");
print 'body { text-align: justify; font-size: 2em; }';
используя ReactJs, когда я добавляю файл стиля в индекс.html, используя относительную ссылку, такую как
<link rel="stylesheet" href="./css/style.css">
и тогда я перейду к маршруту, скажем;localhost:3000/artist
и обновить, я получаю ошибку.
ошибка исчезла после того, как Я заменил относительную ссылку абсолютной ссылкой, скажем;
<link rel="stylesheet" href="http://localhost/project/public/css/style.css"
.
ответ может быть дан выше. У меня была та же проблема, но я не мог ее решить. Обязательно добавьте как
<script src="main.js"></script>