Zasób interpretowany jako arkusz stylów, ale przesyłany za pomocą tekstu / html typu MIME (wydaje się, że nie jest powiązany z serwerem WWW)

Mam ten problem. Chrome nadal zwraca ten błąd

Zasób interpretowany jako arkusz stylów, ale przesyłany za pomocą typu MIME text / html

Pliki dotknięte tym błędem to po prostu styl, wybrane i jquery-gentleselect (inne pliki CSS importowane do indeksu w ten sam sposób działają dobrze i bezbłędnie). Sprawdziłem już mój typ MIME, a text / css jest już w CSS.

Szczerze mówiąc, chciałbym zacząć od zrozumienia problemu (wydaje się, że nie mogę tego zrobić sam).

chciałbym zacząć od zrozumienia problemu

Przeglądarki przesyłają żądania HTTP do serwerów. Serwer następnie wysyła odpowiedź HTTP.

Zarówno żądania, jak i odpowiedzi składają się z kilku nagłówków i (czasem opcjonalnego) treści z zawartością.

Jeśli istnieje Content-Typetreść , to jednym z nagłówków jest opis tego, czym jest treść (czy jest to dokument HTML? Obraz? Zawartość formularza? Itd.).

Gdy poprosisz o arkusz stylów, serwer informuje przeglądarkę, że jest to dokument HTML ( Content-Type: text/html) zamiast arkusza stylów ( Content-Type: text/css).

Sprawdziłem już mój plik myme.type, a text / css jest już na css.

Następnie coś innego na twoim serwerze sprawia, że ​​arkusz stylów ma niewłaściwy typ zawartości.

Użyj karty Net w narzędziach programistycznych przeglądarki, aby sprawdzić żądanie i odpowiedź.

Używasz Angulara?

Jest to bardzo ważne zastrzeżenie do zapamiętania.

Tag podstawowy musi znajdować się nie tylko w głowie, ale we właściwej lokalizacji.

Miałem tag podstawowy w niewłaściwym miejscu w głowie, powinien pojawić się przed tagami z żądaniami adresów URL. Zasadniczo umieszczenie go jako drugiego znacznika pod tytułem rozwiązało dla mnie.

<base href="/">

Tutaj napisałem o tym mały post

Miałem również problem z tym błędem i znalazłem rozwiązanie. Nie wyjaśnia to, dlaczego wystąpił błąd, ale w niektórych przypadkach wydaje się to naprawić.

Dołącz ukośnik / przed ścieżką do pliku css, tak jak to:

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

Mój problem był prostszy niż wszystkie odpowiedzi w tym poście.

Musiałem skonfigurować IIS, aby zawierał zawartość statyczną.

Spróbuj tego <link rel="stylesheet" type="text/css" href="../##/yourcss.css">

gdzie ##jest twój folder, w którym znajduje się plik .CSS

Nie zapomnij o: ..(podwójnych kropkach).

Ustawienie anonimowych poświadczeń uwierzytelnienia na tożsamość puli aplikacji załatwiło sprawę.

Miałem również ten sam problem. Po przeprowadzeniu prac badawczo-rozwojowych odkryłem, że problem dotyczy nazwy pliku. Właściwy plik nazywał się „lightgallery.css”, ale podczas łączenia wpisałem „lightGallery.css” .

Więcej informacji:

Działa dobrze na moim lokalnym hoście (system operacyjny: Windows 8.1 i serwer: Apache). Ale kiedy przesłałem moją aplikację na zdalny serwer (inny system operacyjny i serwer WWW niż mój localhost), to nie działało, dając mi ten sam błąd co twój.

Problem polegał na rozróżnianiu wielkości liter (w odniesieniu do nazw plików) serwera.

Na podstawie innych odpowiedzi wydaje się, że ta wiadomość ma wiele przyczyn. Pomyślałem, że podzielę się moim indywidualnym rozwiązaniem na wypadek, gdyby ktoś miał mój problem w przyszłości.

Nasza strona ładuje pliki CSS z dystrybucji AWS Cloudfront, która używa źródła S3 jako źródła. Ten konkretny segment S3 był synchronizowany z serwerem Linux z systemem Jenkins. syncPolecenia za pośrednictwem s3cmdzestawów Content-Type dla obiektu S3 automatycznie w oparciu o to, co mówi OS (prawdopodobnie na podstawie rozszerzenia pliku). Z jakiegoś powodu na naszym serwerze wszystkie typy były ustawione poprawnie, z wyjątkiem .cssplików, które nadał typowi text/plain. W S3, gdy sprawdzasz metadane we właściwościach pliku, możesz ustawić typ na cokolwiek chcesz. Ustawienie text/cssumożliwiające naszej witrynie poprawną interpretację plików jako CSS i prawidłowe ładowanie.

Jeśli podajesz statyczny css z nginx, powinieneś dodać

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

lub

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

do nginx conf

Odpowiedź @Roba Sedgwicka dała mi wskazówkę, jednak w moim przypadku moja aplikacja była aplikacją Spring Boot . Właśnie dodałem wyjątki w mojej konfiguracji zabezpieczeń dla ścieżek do danych plików ...

UWAGA - To rozwiązanie jest oparte na SpringBoot ... To, co może być konieczne, może się różnić w zależności od używanego języka programowania i / lub używanego frameworka

Należy jednak zwrócić uwagę na;

Zasadniczo problem może powstać, gdy każde żądanie, w tym dotyczące treści statycznej, jest uwierzytelniane.

Powiedzmy, że niektóre ścieżki do mojej zawartości statycznej, które powodowały błędy, są następujące;

Ścieżka zwana „wtyczkami”

http: // localhost: 8080 / plugins / styles / css / file-1.css

http: // localhost: 8080 / plugins / styles / css / file-2.css

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

I ścieżka zwana „stronami”

http: // localhost: 8080 / pages / styles / css / style-1.css

http: // localhost: 8080 / pages / styles / css / style-2.css

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

Następnie po prostu dodaję wykluczenia w następujący sposób w mojej konfiguracji Spring 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
    }

}

Twoje zdrowie!

Korzystanie z Angulara

W moim przypadku użycie ng-hrefzamiast hrefrozwiązania dla mnie.

Uwaga :

Pracuję z laravel jako zapleczem

miałem do czynienia z tym samym, z czymś w rodzaju tego samego pliku .htaccess do tworzenia ładnych adresów URL. po kilku godzinach rozglądania się i eksperymentowania. dowiedziałem się, że błąd był spowodowany względnym łączeniem plików.

przeglądarka rozpocznie pobieranie tego samego źródłowego pliku HTML dla wszystkich plików css, js i plików graficznych, gdy przejrzę kilka kroków w głąb serwera.

aby temu zaradzić, możesz użyć <base>tagu w źródle HTML,

<base href="http://localhost/assets/">

i link do plików takich jak,

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/script.js"></script>

lub użyj bezwzględnych linków do wszystkich swoich plików.

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

Jeśli korzystasz z JSP, ten problem może wynikać z mapowania serwletu. jeśli twoje mapowanie bierze URL przez defaut w następujący sposób:

@WebServlet("/")

następnie kontener interpretuje adres URL css i przechodzi do serwletu zamiast do pliku css.

miałem ten sam problem, zmieniłem mapowanie i teraz wszystko działa

Mam podobny problem w MVC4 przy użyciu uwierzytelniania formularzy. Problemem była ta linia w pliku web.config,

<modules runAllManagedModulesForAllRequests="true">

Oznacza to, że każde żądanie, w tym dotyczące treści statycznej, jest uwierzytelniane.

Zmień ten wiersz na:

<modules runAllManagedModulesForAllRequests="false">

Ostatnio mam ten problem także na Chrome . Podaję tylko bezwzględną ścieżkę rozwiązania mojego problemu z plikiem CSS.

<link rel="stylesheet" href="<?=SS_URL?>arica/style.css" type="text/css" />

Chcę rozwinąć kwestię Todda R. w OP. Na stronach asp.net web.configplik określa uprawnienia potrzebne do uzyskania dostępu do każdego pliku lub folderu w aplikacji. W naszym przypadku folder plików CSS nie zezwalał na dostęp nieautoryzowanym użytkownikom, powodując awarię strony logowania przed autoryzacją użytkownika. Zmiana wymaganych uprawnień w web.configuprawnionych nieautoryzowanych użytkownikach dostępu do plików CSS i rozwiązanie tego problemu.

W przypadku, gdy ktoś przyjdzie do tego postu i ma podobny problem. Właśnie spotkałem podobny problem, ale rozwiązanie było dość proste.

Deweloper błędnie upuścił kopię pliku web.config do katalogu CSS. Po usunięciu wszystkie błędy zostały rozwiązane, a strona poprawnie wyświetlona.

Ten sam problem natrafiłem na wznowienie pracy nad starym projektem stosu MEAN. Używałem nodemonjako mojego lokalnego serwera programistycznego i dostałem ten sam błąd Resource interpreted as stylesheet but transferred with MIME type text/html. Zmieniłem z nodemonna http-serverktóry można znaleźć tutaj . Od razu zadziałało dla mnie.

Jest tak, ponieważ musisz ustawić typ zawartości jako text / html zamiast text / css dla swojej strony serwera (php, node.js itp.)

Stało się tak, gdy usunąłem protokół z linku css dla arkusza stylów css obsługiwanego przez Google CDN.

Nie powoduje to błędu:

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

Ale to daje błąd Zasób interpretowany jako arkusz stylów, ale przesyłany za pomocą tekstu / html typu MIME :

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

Miałem podobny problem. I odkrywanie rozwiązań na tej fantastycznej stronie przepełnienia stosu.

odpowiedź użytkownika 54861 ​​(niedopasowanie nazw w przypadku wrażliwości na wielkość liter) powoduje, że jestem ciekawy, aby ponownie sprawdzić kod i zdałem sobie sprawę, że „ nie przesłałem dwóch plików js, które załadowałem do tagu head ”. :-)

Po ich przesłaniu problem mija! Kod działa i strona jest renderowana bez żadnego innego błędu!

Morał tej historii nie polega na tym, aby upewnić się, że wszystkie pliki js są przesyłane tam, gdzie strona ich szuka.

Ten sam problem natrafiłem na aplikację .NET, open source CMS o nazwie MojoPortal. W jednym z moich motywów i skórki dla konkretnej witryny podczas przeglądania lub testowania zgrzyta i zwalnia, jakby się dusiła.

Mój problem nie dotyczył atrybutu „typ” dla CSS, ale „inną rzecz”. Moja dokładna zmiana dotyczyła Web.Config . Zmieniłem wszystkie wartości na FALSE dla MinifyCSS, CacheCssOnserver i CacheCSSinBrowser.

Po tym ustawieniu strona internetowa znów była szybka w produkcji.

Miałem ten sam błąd, ponieważ pierwszy raz zapomniałem wysłać poprawny nagłówek

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

Używając ReactJs, kiedy dodam plik stylu do index.html używając względnego linku, takiego jak

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

a następnie nawiguję do trasy powiedz; localhost:3000/artisti odświeżam, pojawia się błąd.

Błąd zniknął po zastąpieniu linku względnego linkiem bezwzględnym powiedz;

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

Napotkałem ten problem podczas ładowania CSS dla modułu układu React, który zainstalowałem z npm. Musisz zaimportować dwa pliki .css, aby uruchomić ten moduł, więc początkowo zaimportowałem je w następujący sposób:

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

ale okazało się, że rozszerzenie pliku należy usunąć, więc zadziałało:

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

Jeśli nodejs i przy użyciu ekspresowego kodu poniżej działa ...

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

Mam dokładnie ten sam problem i po kilku minutach wygłupiania się odszyfrowałem, że przegapiłem dodanie rozszerzenia pliku do mojego nagłówka. więc zmieniłem następujący wiersz:

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

do

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

Zacząłem dostawać ten problem dzisiaj tylko na chrome, a nie safari dla tego samego projektu / adresu URL dla mojego kontenera dla goormide (node.js)

Po wypróbowaniu kilku powyższych sugestii, które nie działały, i ponownym śledzeniu niektórych zmian kodu, które wprowadziłem od wczoraj do dzisiaj, co również nie miało znaczenia, wylądowałem w ustawieniach chrome, klikając:

1. ustawienia;

2. przewiń w dół, wybierz: „Zaawansowane”;

3. przewiń w dół, wybierz: „Przywróć ustawienia do pierwotnych ustawień domyślnych”;

Wydaje się, że to rozwiązało problem, ponieważ nie otrzymuję już ostrzeżenia / błędu w konsoli, a strona wyświetla się tak, jak powinna. Po przeczytaniu powyższych postów problem może wystąpić z dowolnej liczby źródeł, więc resetowanie ustawień jest potencjalną ogólną poprawką. Twoje zdrowie

Jeśli udostępniasz aplikację w prod, upewnij się, że podajesz pliki statyczne pracownikowi serwisu. Miałem ten błąd, gdy obsługiwałem tylko statyczny podfolder React build na Django (bez zasobów, które mają style)

Korzystanie z React

Ten błąd wystąpił w mojej aplikacji reagowania na profile. Moja aplikacja zachowywała się tak, jakby próbowała odwołać się do adresu URL, który nie istnieje. Wierzę, że ma to coś wspólnego z tym, jak zachowuje się webpack.

Jeśli łączysz pliki w folderze publicznym, musisz pamiętać, aby użyć% PUBLIC_URL% przed zasobem takim jak ten:

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