У меня есть эта проблема. Chrome продолжает возвращать эту ошибку
Ресурс интерпретируется как таблица стилей, но передается с MIME-типом text / html
Файлы, затронутые этой ошибкой, это просто Style, selected и jquery-gentleselect (другие CSS-файлы, импортированные в индекс аналогичным образом, работают хорошо и без ошибок). Я уже проверил мой тип MIME и text / css уже на CSS.
Честно говоря, я хотел бы начать с понимания проблемы (что, кажется, я не могу сделать в одиночку).
html
css
google-chrome
Максимум
источник
источник
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/login". login:1 Uncaught SyntaxError: Unexpected token <
показывало перенаправленный URL-адрес страницы вместо исходного запроса CSS, что усложняло поиск.Ответы:
Браузеры делают HTTP-запросы к серверам. Затем сервер отправляет HTTP-ответ.
И запросы, и ответы состоят из группы заголовков и (иногда необязательного) тела с некоторым содержанием в нем.
Если есть тело, то один из заголовков является тем,
Content-Type
который описывает, что это за тело (это HTML-документ? Изображение? Содержание отправки формы? И т. Д.).Когда вы запрашиваете вашу таблицу стилей, ваш сервер сообщает браузеру, что это HTML-документ (
Content-Type: text/html
) вместо таблицы стилей (Content-Type: text/css
).Затем что-то еще на вашем сервере заставляет эту таблицу стилей идти с неправильным типом контента.
Используйте вкладку Net инструментов разработчика вашего браузера, чтобы проверить запрос и ответ.
источник
Используя Angular?
Это очень важное предупреждение, чтобы помнить.
Базовый тег должен быть не только в голове, но и в правильном месте.
У меня был базовый тег в неправильном месте в голове, он должен стоять перед любыми тегами с запросами URL. По сути, размещение его в качестве второго тега под заголовком решило это для меня.
Я написал небольшой пост об этом здесь
источник
ng-href
вместо того, чтобыhref
решить это для меня!RewriteRule ^my_dir/(.+)$ /new_dir/?my_var=$1 [L,QSA]
У меня также была проблема с этой ошибкой, и я нашел решение. Это не объясняет, почему произошла ошибка, но, похоже, в некоторых случаях ее исправляют.
Добавьте косую черту / перед путем к файлу CSS, например, так:
<link rel="stylesheet" href="https://stackoverflow.com/css/bootstrap.min.css">
источник
/css/bootstrap.min.css
, но когда вы его не включили,/
он просто смотрит его в текущем каталоге, например, если вы перешли наyoursite.com/hello/trilochan
него, то он будет смотреть внизуhello/css/bootsrap.min.css
, но на самом деле он нижеyoursite.com/css/bootsrap.min.css
, надеюсь, я очистил это,/
относится к корню, и без/
, он смотрит в текущем каталоге.Моя проблема была проще, чем все ответы в этом посте.
Мне пришлось настроить IIS для включения статического содержимого.
источник
Попробуй это
<link rel="stylesheet" type="text/css" href="../##/yourcss.css">
где
##
ваша папка, где ваш .CSS-файлНе забывайте о:
..
(двойные точки).источник
..
Установка учетных данных для анонимной аутентификации в пул приложений .
источник
Я также столкнулся с той же проблемой. И после некоторых исследований я обнаружил, что проблема связана с именем файла. Название фактического файла было «lightgallery.css», но во время ссылки я набрал «lightGallery.css» .
Больше информации:
Он хорошо работал на моем локальном хосте (ОС: Windows 8.1 и сервер: Apache). Но когда я загрузил свое приложение на удаленный сервер (отличный от операционной системы и веб-сервера, чем мой локальный хост), оно не сработало, выдав такую же ошибку, как у вас.
Таким образом, проблема заключалась в чувствительности к регистру (в отношении имен файлов) сервера.
источник
Основываясь на других ответах, кажется, что у этого сообщения много причин, я подумал, что просто поделюсь своим индивидуальным решением на случай, если у кого-то будет точная проблема в будущем.
Наш сайт загружает файлы CSS из дистрибутива AWS Cloudfront, в котором в качестве источника используется корзина S3. Эта конкретная корзина S3 была синхронизирована с сервером Linux под управлением Jenkins. Команда
sync
vias3cmd
устанавливает Content-Type для объекта S3 автоматически в зависимости от того, что говорит операционная система (предположительно, на основании расширения файла). По какой-то причине на нашем сервере все типы были установлены правильно, кроме.css
файлов, которым он дал типtext/plain
. На S3, когда вы проверяете метаданные в свойствах файла, вы можете установить тип по своему усмотрению. Установка этого параметраtext/css
позволила нашему сайту правильно интерпретировать файлы как CSS и правильно загружаться.источник
Если вы используете статические CSS с nginx, вы должны добавить
или
к Nginx Conf
источник
Ответ @Rob Sedgwick дал мне указатель, однако в моем случае мое приложение было Spring Boot Application . Поэтому я только что добавил исключения в моей конфигурации безопасности для путей к соответствующим файлам ...
ПРИМЕЧАНИЕ. - Это решение основано на SpringBoot ... То, что вам может понадобиться, может отличаться в зависимости от того, какой язык программирования вы используете и / или какую платформу вы используете
Однако следует отметить, что
Итак, скажем, некоторые пути к моему статическому контенту, которые вызывали ошибки, следующие:
Путь под названием "плагины"
И путь называется "страницы"
Затем я просто добавляю исключения следующим образом в конфигурацию безопасности Spring Boot;
Исключая эти пути
"/plugins/**"
и"/pages/**"
из аутентификации, ошибки исчезли.Ура!
источник
Используя Angular
В моем случае
ng-href
вместоhref
решить это для меня.Примечание :
Я работаю с Laravel в качестве бэк-энда
источник
я столкнулся с тем же, с чем-то вроде того же файла .htaccess для создания красивых URL-адресов. после нескольких часов осмотра и экспериментов. я обнаружил, что ошибка была из-за относительно ссылки на файлы.
браузер начнет извлекать один и тот же исходный html-файл для всех файлов css, js и image, когда я просмотрю несколько шагов вглубь сервера.
чтобы противостоять этому, вы можете использовать
<base>
тег в HTML-источнике,и ссылки на такие файлы, как,
или используйте абсолютные ссылки для всех ваших файлов.
источник
Если вы работаете в JSP, эта проблема может быть связана с отображением вашего сервлета. если ваше отображение принимает URL по умолчанию, как это:
затем контейнер интерпретирует ваш URL-адрес CSS и переходит к сервлету, а не к файлу CSS.
у меня была та же проблема, я изменил свое отображение и теперь все работает
источник
У меня похожая проблема в MVC4 с использованием аутентификации форм. Проблема была в этой строке в web.config,
Это означает, что каждый запрос, включая запросы на статическое содержимое, проходит проверку подлинности.
Измените эту строку на:
источник
Я также недавно столкнулся с этой проблемой на хром . Я просто даю абсолютный путь к решению моей проблемы с файлом CSS.
источник
Я хочу расширить точку зрения Тодда Р. в ОП. На страницах asp.net
web.config
файл определяет разрешения, необходимые для доступа к каждому файлу или папке в приложении. В нашем случае папка с файлами CSS не позволяла доступ неавторизованным пользователям, что приводило к ее сбою на странице входа в систему до авторизации пользователя. Изменение необходимых разрешенийweb.config
позволило неавторизованным пользователям получить доступ к файлам CSS и решило эту проблему.источник
В случае, если кто-то заходит на этот пост и имеет аналогичную проблему. Я только что столкнулся с подобной проблемой, но решение было довольно простым.
Разработчик по ошибке поместил копию файла web.config в каталог CSS. После удаления все ошибки были устранены и страница отображалась правильно.
источник
Я столкнулся с той же проблемой, продолжая работу над старым стековым проектом MEAN. Я использовал в
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.
Это не дает ошибки:
Но это дает ошибку Resource, интерпретируемую как таблицу стилей, но переданную с типом MIME text / html :
источник
Я столкнулся с подобной проблемой. И изучение решений на этой фантастической странице переполнения стека.
Ответ пользователя user54861 (несовпадение имен в случае чувствительности) заставляет меня любопытно еще раз проверить мой код и понял, что « я не загружал два js-файла, которые я загрузил в тег head ». :-)
Когда я загрузил их, проблема исчезла! И код запускается и страница отображается без каких-либо ошибок!
Итак, мораль этой истории заключается в том, чтобы не забыть убедиться, что все ваши файлы js загружены там, где их ищет страница.
источник
Я столкнулся с той же проблемой с приложением .NET, открытым исходным кодом CMS под названием MojoPortal. В одной из моих тем и скинов для определенного сайта, при просмотре или тестировании он будет растираться и замедляться, как будто он задыхается.
Моя проблема не была связана с атрибутом «type» для CSS, но это была «та другая вещь». Мое точное изменение было в Web.Config . Я изменил все значения на FALSE для MinifyCSS, CacheCssOnserver и CacheCSSinBrowser.
Как только это было установлено, веб-сайт снова начал работать.
источник
Была та же ошибка, потому что я забыл сначала отправить правильный заголовок
источник
Использование 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 для модуля макета React, который я установил с помощью npm. Вы должны импортировать два файла .css, чтобы запустить этот модуль, поэтому я изначально импортировал их так:
но обнаружил, что расширение файла должно быть удалено, так что это сработало:
источник
Если nodejs и используя express, то приведенный ниже код работает ...
источник
У меня точно такая же проблема, и после нескольких минут дурачения я расшифровал, что пропустил, чтобы добавить расширение файла в мой заголовок. поэтому я изменил следующую строку:
в
источник
Я начал получать проблему сегодня только в Chrome и не Safari для того же проекта / URL для моего контейнера goormide (node.js)
Попробовав несколько приведенных выше предложений, которые, похоже, не сработали, и откатив некоторые изменения кода, которые я сделал со вчерашнего дня до сегодняшнего дня, и которые также не имели никакого значения, я оказался в настройках Chrome:
1.Settings;
2. прокрутите вниз, выберите: «Дополнительно»;
3. Прокрутите вниз до низа, выберите: «Восстановить настройки к их исходным настройкам»;
Это, похоже, решило проблему, так как я больше не получаю предупреждение / ошибку в консоли, и страница отображается так, как должна. Читая посты выше, кажется, что проблема может возникать из любого количества источников, поэтому сброс настроек является потенциальным общим исправлением. ура
источник
Если вы обслуживаете приложение в prod, убедитесь, что вы предоставляете статические файлы сервисному работнику. У меня была эта ошибка, когда я обслуживал только статическую подпапку сборки React на Django (без ресурсов, у которых есть стили)
источник
Использование React
Я столкнулся с этой ошибкой в моем приложении профиля реакции. Мое приложение вело себя так, как будто оно пыталось сослаться на URL, который не существует. Я считаю, что это как-то связано с тем, как ведет себя webpack.
Если вы связываете файлы в своей общей папке, вы должны не забыть использовать% PUBLIC_URL% перед таким ресурсом:
источник