У меня есть эта проблема. 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.
Тогда что-то еще о вашем сервере делает эту таблицу стилей неправильным типом контента.
Используйте вкладку "Сеть" инструментов разработчика браузера, чтобы проверить запрос и ответ.
Использование Angular?
Это очень важное предостережение.
Базовый тег должен находиться не только в голове, но и в нужном месте.
У меня был базовый тег в неправильном месте в голове, он должен появиться перед любыми тегами с запросами url. По существу, ставя его вторым тегом под названием, он решил это для меня.
<base href="/">
Я написал небольшую запись на нем здесь
У меня также была проблема с этой ошибкой, и я пришел к решению. Это не объясняет, почему произошла ошибка, но в некоторых случаях это исправляет.
Включите переднюю косую черту / до пути к css файлу, например:
<link rel="stylesheet" href="/css/bootstrap.min.css">
Моя проблема была проще, чем все ответы в этом посте.
Мне пришлось настроить IIS для включения статического содержимого.
Попробуйте <link rel="stylesheet" type="text/css" href="../##/yourcss.css">
где ## - ваша папка, в которой находится ваш .CSS файл
Не забывайте о: .. (двойные точки).
У меня тоже была проблема. И после выполнения R & D я обнаружил, что проблема связана с именем файла. Имя фактического файла было "lightgallery.css" , но при связывании я набрал "lightGallery.css" .
Дополнительная информация:
Он хорошо работал на моем localhost (ОС: Windows 8.1 и Server: Apache). Но когда я загрузил свое приложение на удаленный сервер (разные ОС и веб-сервер, чем мой локальный хост), это не сработало, дав мне ту же ошибку, что и ваша.
Таким образом, проблема заключалась в чувствительности к регистру (в отношении имен файлов) сервера.
Установка учетных данных для анонимной аутентификации в пул приложений.
Основываясь на других ответах, похоже, что у этого сообщения есть много причин, я думал, что просто поделюсь своим индивидуальным решением, если у кого-то будет моя точная проблема в будущем.
Наш сайт загружает файлы CSS из дистрибутива AWS Cloudfront, который использует ведро S3 в качестве источника. Это конкретное ведро S3 было синхронизировано с сервером Linux, на котором работает Jenkins. Команда sync через s3cmd автоматически устанавливает объект Content-Type для объекта S3 в зависимости от того, что говорит ОС (предположительно на основе расширения файла). По какой-то причине на нашем сервере все типы были установлены правильно, кроме .css файлов, которые он дал типу text/plain. В S3, когда вы проверяете метаданные в свойствах файла, вы можете установить тип так, как хотите. Установка его на text/css позволила нашему сайту правильно интерпретировать файлы как CSS и правильно загрузиться.
Ответ @Rob Sedgwick дал мне указатель, однако в моем случае мое приложение было Spring Boot Application. Поэтому я просто добавил исключения в моей конфигурации безопасности для путей к соответствующим файлам...
ПРИМЕЧАНИЕ. - Это решение основано на SpringBoot... То, что вам может понадобиться, может отличаться в зависимости от того, какой язык программирования вы используете и/или какую платформу вы используете
Однако следует отметить, что
По сути, проблема может быть вызвана тем, что каждый запрос, включая запросы на статическое содержимое, проходит проверку подлинности.
Итак, допустим, некоторые пути к моему статическому содержимому, которые вызывали ошибки, следующие:
Путь под названием "плагины"
HTTP://локальный: 8080/плагины/стили /CSS/файл-1.css
И путь называется "страницы"
HTTP://локальный: 8080/страницы/стили /CSS/стиль-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/**" из аутентификации позволило устранить ошибки. Ура!
Использование Angular
В моем случае использование ng-href вместо href решило его для меня.
Примечание:
Я работаю с laravel как back-end
i столкнулся с тем же, что-то вроде файла .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.
у меня была та же проблема, я изменил свое отображение и теперь все работает
У меня есть аналогичная проблема в MVC4 с использованием проверки подлинности форм. Проблема была в этой строке в файле web.config,
<modules runAllManagedModulesForAllRequests="true">
Это означает, что каждый запрос, в том числе для статического контента, проходит проверку подлинности.
Измените эту строку на:
<modules runAllManagedModulesForAllRequests="false">
Недавно я столкнулся с этой проблемой на хром. Я просто даю абсолютный путь к решению проблемы с файлом CSS.
<link rel="stylesheet" href="<?=SS_URL?>arica/style.css" type="text/css" />
Это потому, что вы должны установить тип содержимого как text/html вместо text/css для своей страницы сервера (php, node.js и т.д.)
Я хочу расширить точку Тодда R в OP. На страницах asp.net файл web.config определяет разрешения, необходимые для доступа к каждому файлу или папке в приложении. В нашем случае папка файлов CSS не разрешала доступ для неавторизованных пользователей, что приводило к сбою на странице входа в систему до того, как пользователь был авторизован. Изменение необходимых разрешений в web.config позволило неавторизованным пользователям получить доступ к файлам CSS и решить эту проблему.
Если nodejs и использовать экспресс приведенный ниже код работает...
res.set('Content-Type', 'text/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
Если кто-то приходит на этот пост и имеет аналогичную проблему. Я просто испытал подобную проблему, но решение было довольно простым.
Разработчик ошибочно сбросил копию web.config в каталог CSS. После удаления все ошибки были устранены, и страница была правильно отображена.
Я столкнулся с той же проблемой при возобновлении работы над старым проектом стека MEAN. Я использовал nodemon в качестве локального сервера разработки и получил ту же ошибку Resource interpreted as stylesheet but transferred with MIME type text/html. Я изменился с nodemon на http-server, который можно найти здесь здесь. Это немедленно сработало для меня.
Это произошло, когда я удалил протокол из ссылки css для таблицы стилей CSS, обслуживаемой CDN Google.
Это не дает ошибок:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Architects+Daughter">
Но это дает сообщение об ошибке, интерпретируемое как таблица стилей, но передается с текстом типа MIME/html:
<link rel="stylesheet" href="fonts.googleapis.com/css?family=Architects+Daughter">
Я столкнулся с подобной проблемой. И Изучение решений на этой фантастической странице.
user54861 ответ (несоответствие имен в случае чувствительности) заставляет меня любопытно проверить мой код еще раз и понял, что " я не загружал два js файла, которые я загрузил в главный тег".: -)
Когда я загрузил их, проблема исчезла! И запуск кода и страница отображаются без какой-либо другой ошибки!
Итак, мораль этой истории не забудьте удостовериться, что все ваши файлы 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";
В моем случае такая же ошибка была с JSP. Вот как я дошел до корня этой проблемы: я перешел на вкладку "Сеть" и ясно увидел, что запрос браузера на получение CSS возвращает заголовок ответа, имеющий "Content-type": "text/html". Я открыл другую вкладку и вручную нажал на запрос для получения CSS. Это закончилось тем, что вернул html log форму. Оказывается, мое веб-приложение имело отображение URL для записи сервлета path = / Tomcat: (@WebServlet({ "/,/index", }). Таким образом, любые несопоставимые URL-адреса запроса каким-то образом сопоставлялись с / и соответствующий сервлет был возвращение формы журнала в формате html. Я исправил это, удалив отображение в /
Кроме того, конфигурация tomcat по обработке MIME-TYPE css уже присутствовала.
Ответ может быть дан выше. У меня была такая же проблема, и я не мог ее решить. Убедитесь, что добавили external js файл external js как
<script src="main.js"></script>