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

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

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

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

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

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

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

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

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

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

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

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

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

Используя Angular?

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

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

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

<base href="/">

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

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

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

<link rel="stylesheet" href="https://stackoverflow.com/css/bootstrap.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. Команда syncvia s3cmdустанавливает Content-Type для объекта S3 автоматически в зависимости от того, что говорит операционная система (предположительно, на основании расширения файла). По какой-то причине на нашем сервере все типы были установлены правильно, кроме .cssфайлов, которым он дал тип text/plain. На S3, когда вы проверяете метаданные в свойствах файла, вы можете установить тип по своему усмотрению. Установка этого параметра text/cssпозволила нашему сайту правильно интерпретировать файлы как CSS и правильно загружаться.

Если вы используете статические 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

Ответ @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
    }

}

Ура!

Используя Angular

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

Примечание :

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

я столкнулся с тем же, с чем-то вроде того же файла .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" />

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

@WebServlet("/")

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

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

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

<modules runAllManagedModulesForAllRequests="true">

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

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

<modules runAllManagedModulesForAllRequests="false">

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

<link rel="stylesheet" href="<?=SS_URL?>arica/style.css" type="text/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.

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

<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">

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

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

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

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

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

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

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

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

header("Content-type: text/css; charset: UTF-8");
print 'body { text-align: justify; font-size: 2em; }';

Использование 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, чтобы запустить этот модуль, поэтому я изначально импортировал их так:

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

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

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

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

res.set('Content-Type', 'text/css');

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

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

в

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

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

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

1.Settings;

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

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

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

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

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

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

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

<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/bootstrap.min.css" />