Ресурс интерпретируется как таблица стилей, но передается с MIME-типом text / html (кажется, не связан с веб-сервером)

191

У меня есть эта проблема. Chrome продолжает возвращать эту ошибку

Ресурс интерпретируется как таблица стилей, но передается с MIME-типом text / html

Файлы, затронутые этой ошибкой, это просто Style, selected и jquery-gentleselect (другие CSS-файлы, импортированные в индекс аналогичным образом, работают хорошо и без ошибок). Я уже проверил мой тип MIME и text / css уже на CSS.

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

Максимум
источник
Можете ли вы предоставить URL этой таблицы стилей?
Мистер Листер
На всякий случай, если это кому-то нужно. Это происходило со мной из-за сжатия файла CSS. И как-то после двухкратного сжатия, одного локального, другого моего провайдера CDN, сервер больше не может его распознать.
LYu
Это произошло со мной, когда запрос тега таблицы стилей перенаправлялся на сервер из-за проблемы упорядочения промежуточного программного обеспечения (промежуточное программное обеспечение проверки подлинности до обслуживания статических файлов). Сообщение об ошибке в консоли Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/login". login:1 Uncaught SyntaxError: Unexpected token <показывало перенаправленный URL-адрес страницы вместо исходного запроса CSS, что усложняло поиск.
вон
Я тоже испытал то, с чем столкнулся @vaughan. Это потому, что таблица стилей требует аутентификации. , , на странице, которая пыталась выполнить аутентификацию. Это действительно сложная проблема, но как только вы это выясните, это кажется довольно очевидным.
Тодд Р
Многие люди добавили разные решения этой проблемы в разных средах. Мне пришлось много прокручивать, прежде чем найти мою (Reactjs). Не сдавайтесь, если вы не находите свою вершину, как обычно в SO.
Хуан Ланус

Ответы:

87

я хотел бы начать с понимания проблемы

Браузеры делают HTTP-запросы к серверам. Затем сервер отправляет HTTP-ответ.

И запросы, и ответы состоят из группы заголовков и (иногда необязательного) тела с некоторым содержанием в нем.

Если есть тело, то один из заголовков является тем, Content-Typeкоторый описывает, что это за тело (это HTML-документ? Изображение? Содержание отправки формы? И т. Д.).

Когда вы запрашиваете вашу таблицу стилей, ваш сервер сообщает браузеру, что это HTML-документ ( Content-Type: text/html) вместо таблицы стилей (Content-Type: text/css ).

Я уже проверил myme.type и text / css уже на css.

Затем что-то еще на вашем сервере заставляет эту таблицу стилей идти с неправильным типом контента.

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

Quentin
источник
4
Я думаю, что я уверен, что проблема в моем .htaccess, который является pastebin.com/w8UnqFs8 (я забыл упомянуть, что эта ошибка дает мне только в подкаталоге и только после обновления страницы). Спасибо за ваше объяснение, было очень полезно для понимания проблемы. :)
Макс
Убедитесь, что вы можете получить доступ к файлу без входа в систему.
Вакар
1
@ Макс, почему ты не включил эту информацию в реальный вопрос? :)
myrdd
102

Используя Angular?

Это очень важное предупреждение, чтобы помнить.

Базовый тег должен быть не только в голове, но и в правильном месте.

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

<base href="/">

Я написал небольшой пост об этом здесь

Стен Мухув
источник
2
используя ng-hrefвместо того, чтобы hrefрешить это для меня!
Питер Уилсон
Я получаю ошибку синтаксического анализа OTS: вместо этого неверный тег версии, но нашел это при поиске решения и, боже мой, это спасло меня.
Патрик Грэхем
1
В моем случае я использовал правило перезаписи .htaccess, чтобы изменить каталог на переменную строки запроса, например:RewriteRule ^my_dir/(.+)$ /new_dir/?my_var=$1 [L,QSA]
lincolnberryiii
Как и Макс, это исправило мою проблему, несмотря на то, что я не использую Angular. Сначала я разместил оскорбительную ссылку / href перед всеми остальными ссылками в разделе заголовка - и предупреждение исчезло.
Возможно, вы захотите переименовать ваш заголовок в вашей статье. Я даже не использую Angular. Я использую Swift + Leaf, и это решило мою проблему.
быстрый
40

У меня также была проблема с этой ошибкой, и я нашел решение. Это не объясняет, почему произошла ошибка, но, похоже, в некоторых случаях ее исправляют.

Добавьте косую черту / перед путем к файлу CSS, например, так:

<link rel="stylesheet" href="https://stackoverflow.com/css/bootstrap.min.css">

Trilochan
источник
это уместно в этом случае?
Жиль Гуаиллардет
2
Я потерял много времени на эту маленькую ошибку. Если кто-то прочтет мой ответ и он ему поможет, это будет актуально в данном случае.
Трилочан
2
На самом деле произошло то, что сервер обслуживал файл /css/bootstrap.min.css, но когда вы его не включили, /он просто смотрит его в текущем каталоге, например, если вы перешли на yoursite.com/hello/trilochanнего, то он будет смотреть внизу hello/css/bootsrap.min.css, но на самом деле он ниже yoursite.com/css/bootsrap.min.css, надеюсь, я очистил это, /относится к корню, и без /, он смотрит в текущем каталоге.
Сурадж Джейн
1
@GillesGouaillardet Это было очень актуально, у меня была такая же проблема.
Сурадж Джейн
Я очень рекомендую вам веб-разработчик bootcamp на udemy by colt steele, он поможет вам прояснить ваши сомнения.
Сурадж Джейн
17

Моя проблема была проще, чем все ответы в этом посте.

Мне пришлось настроить IIS для включения статического содержимого.

введите описание изображения здесь

JEuvin
источник
10

Попробуй это <link rel="stylesheet" type="text/css" href="../##/yourcss.css">

где ##ваша папка, где ваш .CSS-файл

Не забывайте о: ..(двойные точки).

сл
источник
Я добавил двойные точки и косую черту (../ file_path). это сработало для меня. спасибо
Vidhya
Какова причина добавления этих двух..
Pardeep Jain
10

Установка учетных данных для анонимной аутентификации в пул приложений .

введите описание изображения здесь

Фелипе Круз
источник
9

Я также столкнулся с той же проблемой. И после некоторых исследований я обнаружил, что проблема связана с именем файла. Название фактического файла было «lightgallery.css», но во время ссылки я набрал «lightGallery.css» .

Больше информации:

Он хорошо работал на моем локальном хосте (ОС: Windows 8.1 и сервер: Apache). Но когда я загрузил свое приложение на удаленный сервер (отличный от операционной системы и веб-сервера, чем мой локальный хост), оно не сработало, выдав такую ​​же ошибку, как у вас.

Таким образом, проблема заключалась в чувствительности к регистру (в отношении имен файлов) сервера.

Сандешвар Шарма
источник
Спасибо, я сломал голову из-за орфографической ошибки.
Нишал Кумар до н.э.
7

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

Наш сайт загружает файлы CSS из дистрибутива AWS Cloudfront, в котором в качестве источника используется корзина S3. Эта конкретная корзина S3 была синхронизирована с сервером Linux под управлением Jenkins. Команда syncvia s3cmdустанавливает Content-Type для объекта S3 автоматически в зависимости от того, что говорит операционная система (предположительно, на основании расширения файла). По какой-то причине на нашем сервере все типы были установлены правильно, кроме .cssфайлов, которым он дал тип text/plain. На S3, когда вы проверяете метаданные в свойствах файла, вы можете установить тип по своему усмотрению. Установка этого параметра text/cssпозволила нашему сайту правильно интерпретировать файлы как CSS и правильно загружаться.

nicolashahn
источник
6

Если вы используете статические CSS с nginx, вы должны добавить

location ~ \.css {
    add_header  Content-Type    text/css;
}
location ~ \.js {
    add_header  Content-Type    application/x-javascript;
}

или

location ~ \.css{
    default_type text/css;
}
location ~ \.js{
    default_type application/x-javascript;
}

к Nginx Conf

Рябченко Александр
источник
5

Ответ @Rob Sedgwick дал мне указатель, однако в моем случае мое приложение было Spring Boot Application . Поэтому я только что добавил исключения в моей конфигурации безопасности для путей к соответствующим файлам ...

ПРИМЕЧАНИЕ. - Это решение основано на SpringBoot ... То, что вам может понадобиться, может отличаться в зависимости от того, какой язык программирования вы используете и / или какую платформу вы используете

Однако следует отметить, что

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

Итак, скажем, некоторые пути к моему статическому контенту, которые вызывали ошибки, следующие:

Путь под названием "плагины"

HTTP: // локальный: 8080 / плагины / стили / CSS / файл-1.css

HTTP: // локальный: 8080 / плагины / стили / CSS / файл-2.css

Http: // Localhost: 8080 / плагины / JS / скрипт-file.js

И путь называется "страницы"

HTTP: // локальный: 8080 / страницы / стили / CSS / стиль-1.css

HTTP: // локальный: 8080 / страницы / стили / CSS / стиль-2.css

HTTP: // локальный: 8080 / страницы / JS / scripts.js

Затем я просто добавляю исключения следующим образом в конфигурацию безопасности 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/**"из аутентификации, ошибки исчезли.


Ура!

SourceVisor
источник
@ Бен Рис-Льюис ... Интересно, почему ты думаешь, что это Вопрос или даже похож на этот вопрос? Возможно, вы хотите прочитать мой ответ достаточно внимательно, чтобы увидеть, что это на самом деле ОТВЕТ - увы, тот, который работал в моем случае ... и определенно НЕ является Вопросом.
SourceVisor
Извини, моя ошибка. Я не уверен, как это случилось, я сделал бу-бу. Пожалуйста, примите мои извинения.
Бен Рис-Льюис
4

Используя Angular

В моем случае ng-hrefвместоhref решить это для меня.

Примечание :

Я работаю с Laravel в качестве бэк-энда

Питер Уилсон
источник
Но где это добавить?
Пардип Джейн
в теге ссылки
Питер Уилсон
3

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

браузер начнет извлекать один и тот же исходный html-файл для всех файлов css, js и image, когда я просмотрю несколько шагов вглубь сервера.

чтобы противостоять этому, вы можете использовать <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" />
Light93
источник
3

Если вы работаете в JSP, эта проблема может быть связана с отображением вашего сервлета. если ваше отображение принимает URL по умолчанию, как это:

@WebServlet("/")

затем контейнер интерпретирует ваш URL-адрес CSS и переходит к сервлету, а не к файлу CSS.

у меня была та же проблема, я изменил свое отображение и теперь все работает

Грег Артиси
источник
2

У меня похожая проблема в MVC4 с использованием аутентификации форм. Проблема была в этой строке в web.config,

<modules runAllManagedModulesForAllRequests="true">

Это означает, что каждый запрос, включая запросы на статическое содержимое, проходит проверку подлинности.

Измените эту строку на:

<modules runAllManagedModulesForAllRequests="false">
Роб Седжвик
источник
2

введите описание изображения здесь Я также недавно столкнулся с этой проблемой на хром . Я просто даю абсолютный путь к решению моей проблемы с файлом CSS.

<link rel="stylesheet" href="<?=SS_URL?>arica/style.css" type="text/css" />
Заид бен Халид
источник
Ты, должно быть, шутишь, издеваешься надо мной. Отклонил это решение как 3 раза. Заходил на эту страницу несколько раз, но попробовав все остальное и собираясь сдаться, я сказал: «Черт возьми, что может пойти не так». Это сработало!!! Тайна жизни
Kermit_ice_tea
1

Я хочу расширить точку зрения Тодда Р. в ОП. На страницах asp.net web.configфайл определяет разрешения, необходимые для доступа к каждому файлу или папке в приложении. В нашем случае папка с файлами CSS не позволяла доступ неавторизованным пользователям, что приводило к ее сбою на странице входа в систему до авторизации пользователя. Изменение необходимых разрешений web.configпозволило неавторизованным пользователям получить доступ к файлам CSS и решило эту проблему.

Сэнди Геттингс
источник
0

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

Разработчик по ошибке поместил копию файла web.config в каталог CSS. После удаления все ошибки были устранены и страница отображалась правильно.

Hideous1
источник
Спасибо @Rohit Gupta за редактирование. Я печатал быстрее, чем обрабатывал мой внутренний менеджер грамматики! =)
Hideous1
3
Это решение для ASP.NET, которое не является очевидной частью вопроса.
Дакаб
@dakab и что? Многие другие ответы также зависят от фреймворка, и они помогли людям использовать те фреймворки, которые испытывают ту же проблему.
Джабрук
0

Я столкнулся с той же проблемой, продолжая работу над старым стековым проектом MEAN. Я использовал в nodemonкачестве локального сервера разработки и получил ту же ошибку Resource interpreted as stylesheet but transferred with MIME type text/html. Я изменился с nodemonна http-serverкоторый можно найти здесь . Это сразу сработало для меня.

captainkirk
источник
0

Это потому, что вы должны установить тип контента как text / html вместо text / css для вашей страницы сервера (php, node.js и т. Д.)

Аюш Агарвал
источник
1
эта проблема касалась CSS-файла, а не HTML-файла
Макс
0

Это произошло, когда я удалил протокол из ссылки css для таблицы стилей css, обслуживаемой Google CDN.

Это не дает ошибки:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Architects+Daughter">

Но это дает ошибку Resource, интерпретируемую как таблицу стилей, но переданную с типом MIME text / html :

<link rel="stylesheet" href="fonts.googleapis.com/css?family=Architects+Daughter">
на паровой тяге
источник
0

Я столкнулся с подобной проблемой. И изучение решений на этой фантастической странице переполнения стека.

Ответ пользователя user54861 ​​(несовпадение имен в случае чувствительности) заставляет меня любопытно еще раз проверить мой код и понял, что « я не загружал два js-файла, которые я загрузил в тег head ». :-)

Когда я загрузил их, проблема исчезла! И код запускается и страница отображается без каких-либо ошибок!

Итак, мораль этой истории заключается в том, чтобы не забыть убедиться, что все ваши файлы js загружены там, где их ищет страница.

Хоссейн Халеси
источник
Это на самом деле не отвечает на вопрос. Если у вас есть другой вопрос, вы можете задать его, нажав Задать вопрос . Вы также можете добавить вознаграждение, чтобы привлечь больше внимания к этому вопросу, когда у вас будет достаточно репутации . - Из обзора
Лимон Кази
Не может быть подсказкой дизайнерам сценариев ecma добавить соответствующую ошибку или исключение в javascript, если разработчик не загрузил ресурс на сервер? Я имею в виду, что «Ресурс интерпретируется как таблица стилей, но передается с MIME-типом text / html», немного сбивает с толку, не так ли?
Хоссейн Халеси
0

Я столкнулся с той же проблемой с приложением .NET, открытым исходным кодом CMS под названием MojoPortal. В одной из моих тем и скинов для определенного сайта, при просмотре или тестировании он будет растираться и замедляться, как будто он задыхается.

Моя проблема не была связана с атрибутом «type» для CSS, но это была «та другая вещь». Мое точное изменение было в Web.Config . Я изменил все значения на FALSE для MinifyCSS, CacheCssOnserver и CacheCSSinBrowser.

Как только это было установлено, веб-сайт снова начал работать.

HI360
источник
0

Была та же ошибка, потому что я забыл сначала отправить правильный заголовок

header("Content-type: text/css; charset: UTF-8");
print 'body { text-align: justify; font-size: 2em; }';
Юргена
источник
0

Использование ReactJs, когда я добавляю файл стиля в index.html, используя относительную ссылку, такую ​​как

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

а потом я иду к маршруту сказать; localhost:3000/artistи обновить, я получаю ошибку.

Ошибка исчезла после того, как я заменил относительную ссылку на абсолютную ссылку, скажем;

<link rel="stylesheet" href="http://localhost/project/public/css/style.css",

Фрэнк Фотангс
источник
У меня была эта проблема, та же среда, и я попробовал ваше решение без удачи. Но вы показали мне путь исследования :-) Сообщения исчезли после того, как я переместил файлы CSS в общую папку. Когда я это делал, не было необходимости в абсолютных путях.
Хуан Ланус
0

Я столкнулся с этой проблемой при загрузке CSS для модуля макета React, который я установил с помощью npm. Вы должны импортировать два файла .css, чтобы запустить этот модуль, поэтому я изначально импортировал их так:

@import "../../../../node_modules/react-grid-layout/css/styles.css";

но обнаружил, что расширение файла должно быть удалено, так что это сработало:

@import "../../../../node_modules/react-grid-layout/css/styles";
Грег Холст
источник
0

Если nodejs и используя express, то приведенный ниже код работает ...

res.set('Content-Type', 'text/css');
Джордж Ливингстон
источник
Комментируя здесь, потому что это связано с Node.JS. Мне пришлось перезапустить приложение на моем хостинг-провайдере
Reed
0

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

<link uic-remove rel="stylesheet" href="css/bahblahblah">

в

<link uic-remove rel="stylesheet" href="css/bahblahblah.css"> 
KF2
источник
0

Я начал получать проблему сегодня только в Chrome и не Safari для того же проекта / URL для моего контейнера goormide (node.js)

Попробовав несколько приведенных выше предложений, которые, похоже, не сработали, и откатив некоторые изменения кода, которые я сделал со вчерашнего дня до сегодняшнего дня, и которые также не имели никакого значения, я оказался в настройках Chrome:

1.Settings;

2. прокрутите вниз, выберите: «Дополнительно»;

3. Прокрутите вниз до низа, выберите: «Восстановить настройки к их исходным настройкам»;

Это, похоже, решило проблему, так как я больше не получаю предупреждение / ошибку в консоли, и страница отображается так, как должна. Читая посты выше, кажется, что проблема может возникать из любого количества источников, поэтому сброс настроек является потенциальным общим исправлением. ура

Макс Петрзак
источник
0

Если вы обслуживаете приложение в prod, убедитесь, что вы предоставляете статические файлы сервисному работнику. У меня была эта ошибка, когда я обслуживал только статическую подпапку сборки React на Django (без ресурсов, у которых есть стили)

Hvitis
источник
0

Использование React

Я столкнулся с этой ошибкой в ​​моем приложении профиля реакции. Мое приложение вело себя так, как будто оно пыталось сослаться на URL, который не существует. Я считаю, что это как-то связано с тем, как ведет себя webpack.

Если вы связываете файлы в своей общей папке, вы должны не забыть использовать% PUBLIC_URL% перед таким ресурсом:

<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/bootstrap.min.css" />
ArrowKneeous
источник