Ik heb dit probleem. Chrome blijft deze fout retourneren
Bron geïnterpreteerd als stylesheet maar overgedragen met MIME-type text/html
De bestanden die door deze fout worden getroffen, zijn alleen de stijl, gekozen en jquery-gentleselect (andere CSS-bestanden die op dezelfde manier in de index worden geïmporteerd, werken goed en zonder fouten). Ik heb mijn MIME-type al gecontroleerd en tekst/css staat al in CSS.
Eerlijk gezegd zou ik willen beginnen met het begrijpen van het probleem (iets dat ik blijkbaar niet alleen kan).
Antwoord 1, autoriteit 100%
ik wil beginnen met het probleem te begrijpen
Browsers doen HTTP-verzoeken aan servers. De server maakt dan een HTTP-antwoord.
Zowel verzoeken als reacties bestaan uit een aantal headers en een (soms optionele) body met wat inhoud erin.
Als er een body is, dan is een van de headers het Content-Typedat beschrijft wat de body is (is het een HTML-document? Een afbeelding? De inhoud van een formulierinzending? enz. ).
Als je om je stylesheet vraagt, vertelt je server de browser dat het een HTML-document is (Content-Type: text/html) in plaats van een stylesheet (Content-Type: text/css).
Ik heb mijn myme.type al gecontroleerd en text/css staat al op css.
Dan is er iets anders aan uw server waardoor die stylesheet wordt geleverd met het verkeerde inhoudstype.
Gebruik het tabblad Net van de ontwikkelaarstools van uw browser om het verzoek en het antwoord te onderzoeken.
Antwoord 2, autoriteit 99%
Hoekig gebruiken?
Dit is een zeer belangrijk voorbehoud om te onthouden.
De basistag moet niet alleen in de kop zitten, maar ook op de juiste locatie.
Ik had mijn basistag op de verkeerde plaats in de kop, deze zou vóór alle tags met url-verzoeken moeten komen. Door het in feite als de tweede tag onder de titel te plaatsen, was het voor mij opgelost.
<base href="/">
Ik heb er een kleine post over geschreven hier
Antwoord 3, autoriteit 44%
Ik had ook een probleem met deze fout en kwam tot een oplossing. Dit verklaart niet waarom de fout is opgetreden, maar het lijkt het in sommige gevallen te verhelpen.
Voeg een slash /toe voor het pad naar het css-bestand, zoals:
<link rel="stylesheet" href="/css/bootstrap.min.css">
Antwoord 4, autoriteit 19%
Mijn probleem was eenvoudiger dan alle antwoorden in dit bericht.
Ik moest IIS instellen om statische inhoud op te nemen.
Antwoord 5, autoriteit 13%
Het instellen van de Anonieme authenticatiegegevens op Application Pool Identitydeed de truc voor mij.
Antwoord 6, autoriteit 10%
Probeer dit <link rel="stylesheet" type="text/css" href="../##/yourcss.css">
waar ##je map is waarin je .CSS – bestand staat
Vergeet de: ..(dubbele stippen) niet.
Antwoord 7, autoriteit 8%
Ik was ook geconfronteerd met hetzelfde probleem. En na het doen van wat R & AMP; D, vond ik dat het probleem bij de bestandsnaam was. De naam van het eigenlijke bestand was “lightgallery.css” maar tijdens het koppelen heb ik “lightgallery.css” .
Meer info:
Het werkte goed op mijn localhost (OS: Windows 8.1 & amp; server: Apache).
Maar toen ik mijn aanvraag naar een externe server (verschillende OS & AMP; webserver heeft geüpload dan op mijn localhost), werkte het niet, waardoor ik dezelfde fout had als de jouwe.
Dus, het probleem was de hoofdgevoeligheid (met betrekking tot bestandsnamen) van de server.
8, Autoriteit 8%
Als u statische CSS met NGINX serveert, moet u
toevoegen
location ~ \.css {
add_header Content-Type text/css;
}
location ~ \.js {
add_header Content-Type application/x-javascript;
}
of
location ~ \.css{
default_type text/css;
}
location ~ \.js{
default_type application/x-javascript;
}
Naar nginx conf
9, Autoriteit 7%
Op basis van de andere antwoorden lijkt het alsof deze boodschap veel oorzaken heeft, ik dacht dat ik mijn individuele oplossing zou delen voor het geval iemand in de toekomst mijn exact probleem heeft.
Onze site laadt de CSS-bestanden van een AWS Cloudfront-distributie, die een S3-bucket als oorsprong gebruikt. Deze specifieke S3-bucket werd gesynchroniseerd gehouden met een Linux-server met Jenkins. De opdracht syncvia s3cmdstelt het Content-Type voor het S3-object automatisch in op basis van wat het besturingssysteem zegt (vermoedelijk gebaseerd op de bestandsextensie). Om de een of andere reden werden op onze server alle typen correct ingesteld, behalve .css-bestanden, die het type text/plaingaven. Wanneer u in S3 de metadata in de eigenschappen van een bestand controleert, kunt u het type instellen op wat u maar wilt. Door het in te stellen op text/csskon onze site de bestanden correct interpreteren als CSS en correct laden.
10, Autoriteit 4%
met behulp van hoek
In mijn geval met ng-hrefin plaats van hrefopgelost het voor mij.
Opmerking:
Ik werk met Laravel als back-end
11, Autoriteit 4%
Als u op JSP bent, kan dit probleem uit uw servletmapping komen.
Als uw toewijzing URL perfaut als volgt heeft:
@WebServlet("/")
vervolgens interpreteert de container uw css-url en gaat naar de servlet in plaats van naar het css-bestand.
ik had hetzelfde probleem, ik heb mijn mapping gewijzigd en nu werkt alles
Antwoord 12, autoriteit 3%
ik stond voor hetzelfde, met ongeveer hetzelfde .htaccess-bestand voor het maken van mooie urls. na enkele uren rondkijken en experimenteren. ik kwam erachter dat de fout te wijten was aan het relatief koppelen van bestanden.
de browser begint hetzelfde html-bronbestand op te halen voor alle css-, js- en afbeeldingsbestanden, terwijl ik een paar stappen diep in de server zou bladeren.
om dit tegen te gaan, kunt u de tag <base>gebruiken op uw html-bron,
<base href="http://localhost/assets/">
en link naar bestanden zoals,
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/script.js"></script>
of gebruik absolute links voor al uw bestanden.
<link rel="stylesheet" type="text/css" href="http://localhost/assets/css/style.css" />
<script src="https://localhost/assets/js/script.js"></script>
<img src="https://localhost/assets/images/logo.png" />
Antwoord 13, autoriteit 2%
Ik heb een soortgelijk probleem in MVC4 met formulierverificatie. Het probleem was deze regel in de web.config,
<modules runAllManagedModulesForAllRequests="true">
Dit betekent dat elk verzoek, inclusief die voor statische inhoud, wordt geverifieerd.
Verander deze regel in:
<modules runAllManagedModulesForAllRequests="false">
Antwoord 14, autoriteit 2%
Ik heb onlangs ook met dit probleem te maken gehad op chrome. Ik geef gewoon een absoluut pad naar het oplossen van mijn CSS-bestandsprobleem.
<link rel="stylesheet" href="<?=SS_URL?>arica/style.css" type="text/css" />
Antwoord 15, autoriteit 2%
Voor iedereen die dit probleem zou kunnen hebben.
Ik was een aangepaste MVC in PHP aan het bouwen toen ik dit probleem tegenkwam.
Ik heb dit kunnen oplossen door mijn activabestanden (css/js/images) op een absoluut pad in te stellen.
In plaats van url zoals href=”css/style.css” te gebruiken, die deze hele huidige url gebruikt om deze te laden. Als u zich bijvoorbeeld in http://example.com/user/5bevindt, zal het probeer te laden op http://example.com/user/5/css/style. css.
Om het probleem op te lossen, kun je een / toevoegen aan het begin van de url van je item (d.w.z. href=”/css/style.css”). Dit zal de browser vertellen om het te laden vanuit de root van uw url. In dit voorbeeld zal het proberen om http://example.com/css/style.css.
Ik hoop dat deze opmerking je zal helpen.
Antwoord 16
Het is omdat je het inhoudstype moet hebben ingesteld als tekst/html in plaats van tekst/css voor je serverpagina (php,node.js enz.)
Antwoord 17
Ik wil uitbreiden op het punt van Todd R in de OP. In ASP.NET-pagina’s, definieert de web.configbestand machtigingen die nodig zijn om elk bestand of map in de toepassing te openen. In ons geval heeft de map van CSS-bestanden geen toegang voor ongeautoriseerde gebruikers toegestaan, waardoor deze op de inlogpagina faalt voordat de gebruiker is geautoriseerd. De vereiste machtigingen wijzigen in web.configToegestane onbevoegde gebruikers om toegang te krijgen tot de CSS-bestanden en dit probleem opgelost.
18
Ik heb hetzelfde exacte probleem en na een paar minuten voor de gek rond ik heb ik ontcijferd die ik heb gemist om de bestandsextensie aan mijn header toe te voegen. Dus ik heb de volgende regel gewijzigd:
<link uic-remove rel="stylesheet" href="css/bahblahblah">
Naar
<link uic-remove rel="stylesheet" href="css/bahblahblah.css">
19
met behulp van reageren
Ik kwam deze fout bij in mijn reactieprofiel-app. Mijn app gedroeg zich een soort zoals het probeerde te verwijzen naar een URL die niet bestaat. Ik geloof dat dit iets te maken heeft met hoe Webpack zich gedraagt.
Als u bestanden koppelt in uw openbare map, moet u onthouden om% public_url% vóór de resource als volgt te gebruiken:
<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/bootstrap.min.css" />
20
Als iemand naar deze post komt en een soortgelijk probleem heeft. Ik heb net een soortgelijk probleem meegemaakt, maar de oplossing was vrij eenvoudig.
Een ontwikkelaar had ten onrechte een kopie van het web.config in de CSS-map gehaald. Na verwijderde, zijn alle fouten opgelost en de pagina correct weergegeven.
21
Ik kwam hetzelfde probleem tegen terwijl ik het werk op een oud gemiddeld stapelproject hervat. Ik gebruik nodemonals mijn lokale ontwikkelingsserver en kreeg dezelfde fout Resource interpreted as stylesheet but transferred with MIME type text/html. Ik ben veranderd van nodemonnaar http-serverdie te vinden is hier . Het werkte meteen voor mij.
22
Dit gebeurde toen ik het protocol uit de CSS-link voor een CSS-stylesheet verwijderde die wordt gediend door een Google CDN.
Dit geeft geen foutmelding:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Architects+Daughter">
Maar dit geeft de fout resource geïnterpreteerd als stylesheet maar overgedragen met MIME TYPE tekst / HTML :
<link rel="stylesheet" href="fonts.googleapis.com/css?family=Architects+Daughter">
23
Ik was geconfronteerd met een vergelijkbaar probleem. En het verkennen van oplossingen in deze fantastische stapeloverlooppagina.
De reactie van User54861 (Mismatching-namen in het geval van sensetiviteit) maakt me benieuwd naar mijn code opnieuw en besefte dat “ik niet twee JS-bestanden uploadt die ik ze in hoofdlabels ” heb geladen. : -)
Toen ik ze geüpload, loopt het probleem weg! En code uitgevoerd en pagina weergegeven zonder een andere fout!
Dus, moraal van het verhaal is niet vergeten om ervoor te zorgen dat al uw JS-bestanden worden geüpload waar de pagina naar hen zoekt.
24
Ik kwam hetzelfde probleem tegen met een .NET-toepassing, een open-source CMS genaamd MojoPortal. In een van mijn thema’s en skin voor een bepaalde site, tijdens het browsen of testen, zou het malen en vertragen alsof het stikte.
Mijn probleem was niet van het “type” attribuut voor de CSS, maar het was “dat andere”. Mijn exacte wijziging was in de Web.Config. Ik heb alle waarden gewijzigd in FALSE voor MinifyCSS, CacheCssOnserver en CacheCSSinBrowser.
Toen dat eenmaal was ingesteld, was de website weer snel in productie.
Antwoord 25
Dezelfde fout omdat ik vergat een correcte header een eerste te sturen
header("Content-type: text/css; charset: UTF-8");
print 'body { text-align: justify; font-size: 2em; }';
Antwoord 26
Ik kwam dit probleem tegen bij het laden van CSS voor een React-layoutmodule die ik met npm heb geïnstalleerd. Je moet twee .css-bestanden importeren om deze module te laten werken, dus ik heb ze in eerste instantie als volgt geïmporteerd:
@import "../../../../node_modules/react-grid-layout/css/styles.css";
maar ontdekte dat de bestandsextensie verwijderd moest worden, dus dit werkte:
@import "../../../../node_modules/react-grid-layout/css/styles";
Antwoord 27
Als nodejsen express. gebruikt
de onderstaande code werkt…
res.set('Content-Type', 'text/css');
Antwoord 28
Ik kreeg het probleem vandaag alleen op Chrome en niet op safari voor hetzelfde project/dezelfde URL voor mijn goormide-container (node.js)
Na het proberen van verschillende suggesties hierboven die niet leken te werken en terug te gaan naar enkele codewijzigingen die ik van gisteren tot vandaag heb aangebracht en die ook geen verschil maakten, belandde ik in de Chrome-instellingen en klikte op:
1.Instellingen;
2.scroll naar beneden, selecteer: “Geavanceerd”;
3.scroll naar beneden, selecteer: “Instellingen terugzetten naar de oorspronkelijke standaardwaarden”;
Dat lijkt het probleem te hebben opgelost, aangezien ik niet langer de waarschuwing/fout in de console krijg en de pagina wordt weergegeven zoals het hoort. Als je de berichten hierboven leest, lijkt het probleem zich vanuit een willekeurig aantal bronnen te kunnen voordoen, dus het resetten van de instellingen is een mogelijke generieke oplossing.
Proost
Antwoord 29
Als u de app in prod bedient, zorg er dan voor dat u de statische bestanden met de servicemedewerker bedient. Ik had deze fout toen ik alleen de statische submap van React build op Django serveerde (zonder middelen met stijlen)