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

У мене ця проблема. Chrome продовжує повертати цю помилку

Ресурс інтерпретується як таблиця стилів, але передається за допомогою тексту / html типу MIME

Файли, на які впливає ця помилка, - це просто Style, selected та jquery-gentleselect (інші файли CSS, які імпортуються в індекс таким же чином, працюють добре і без помилок). Я вже перевірив тип MIME, а текст / css вже є у CSS.

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

я хотів би почати з розуміння проблеми

Браузери роблять HTTP-запити серверам. Потім сервер робить відповідь HTTP.

І запити, і відповіді складаються з купки заголовків і (іноді необов’язкового) корпусу з деяким вмістом у ньому.

Якщо є тіло, то одним із заголовків є те, Content-Typeщо описує, що таке тіло (це HTML-документ? Зображення? Зміст подання форми? Тощо).

Коли ви запитуєте про свою таблицю стилів, ваш сервер повідомляє браузеру, що це HTML-документ ( Content-Type: text/html), а не таблиця стилів ( Content-Type: text/css).

Я вже перевірив свій myme.type і текст / 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). Але коли я завантажив свою програму на віддалений сервер (інший ОС і веб-сервер, ніж мій localhost), це не спрацювало, що дало мені ту саму помилку, що і ваша.

Отже, проблемою була чутливість регістру (щодо імен файлів) сервера.

Виходячи з інших відповідей, схоже, це повідомлення має безліч причин, я думав, що просто поділюсь своїм індивідуальним рішенням у випадку, якщо хтось матиме мою точну проблему в майбутньому.

Наш сайт завантажує файли CSS з дистрибутива AWS Cloudfront, який використовує відро для S3. Цей відрізок S3 синхронізувався з сервером Linux під управлінням Jenkins. syncКоманда з допомогою 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 конф

@Rob Sedgwick відповідь дала мені вказівник, однак, у моєму випадку моїм додатком була програма Spring Boot . Тож я просто додав виключення в конфігурацію безпеки для шляхів до відповідних файлів ...

ПРИМІТКА. Це рішення засноване на SpringBoot ... Те, що вам може знадобитися зробити, може відрізнятися залежно від мови використання програмування та / або тієї основи, яку ви використовуєте.

Однак сенс зазначити;

По суті, проблема може бути викликана, коли кожен запит, у тому числі для статичного вмісту, автентифікований.

Тож скажімо, деякі маршрути до мого статичного вмісту, які спричиняли помилки, такі;

Шлях, який називається "плагіни"

http: // localhost: 8080 / плагіни / стилі / css / file-1.css

http: // localhost: 8080 / плагіни / стилі / css / file-2.css

http: // localhost: 8080 / plugins / js / script-file.js

І шлях, який називається "сторінки"

http: // localhost: 8080 / сторінки / стилі / css / style-1.css

http: // localhost: 8080 / сторінки / стилі / css / style-2.css

http: // localhost: 8080 / pages / js / scriptpts.js

Тоді я просто додаю виключення, як випливає нижче, у моєму Config Security Boot Security;

@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
    }

}

Ура!

Використання кутового

У моєму випадку використовуючи ng-hrefзамість hrefвирішеного для мене.

Примітка :

Я працюю з laravel як бек-енд

Я зіткнувся з тим же, з таким же файлом .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" />

Я хочу розширити питання Тодда Р в ОП. На сторінках 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який можна знайти тут . Це одразу спрацювало для мене.

Це тому, що ви повинні встановити тип вмісту як текст / html замість text / css для сторінки вашого сервера (php, node.js тощо)

Це сталося, коли я видалив протокол із посилання css для таблиці стилів css, яку обслуговує CDN google.

Це не дає помилок:

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

Але це дає Ресурс помилки інтерпретується як Stylesheet, але передається з текстом / html типу MIME :

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

Якщо 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, а не на сафарі для того самого проекту / url для свого контейнера goormide (node.js)

Спробувавши декілька пропозицій, які, як видається, не спрацювали, і відслідковував деякі зміни коду, які я зробив з вчорашнього дня по сьогоднішній день, і це не мало значення, я опинився в налаштуваннях хрому, натиснувши:

1.Налаштування;

2. прокрутіть вниз донизу, виберіть: "Додатково";

3. прокрутіть униз донизу, виберіть: "Відновити настройки до початкових значень за замовчуванням";

Можливо, проблема виправлена, оскільки я більше не отримую попередження / помилку в консолі, а сторінка відображається як слід. Читання публікацій вище, здається, проблема може виникнути з будь-якої кількості джерел, тому скидання налаштувань є потенційним загальним виправленням. Ура

Якщо ви обслуговуєте додаток у продажі, переконайтеся, що статичні файли надсилаєте разом із службовцем служби. У мене була ця помилка, коли я обслуговував лише статичну підпапку React build на Django (без активів, що мають стилі)

Використання React

Я зіткнувся з цією помилкою в додатку свого профілю для реакції. Мій додаток поводився так, як намагався посилатися на URL, який не існує. Я вважаю, що це має щось спільне з тим, як веде себе webpack.

Якщо ви пов'язуєте файли у своїй загальнодоступній папці, ви повинні пам’ятати про використання% PUBLIC_URL% перед таким ресурсом:

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