Ressource als Stylesheet interpretiert, aber mit MIME-Typ text / html übertragen (scheint nicht mit dem Webserver verbunden zu sein)

Ich habe dieses Problem. Chrome gibt diesen Fehler weiterhin zurück

Ressource als Stylesheet interpretiert, aber mit MIME-Typ text / html übertragen

Die von diesem Fehler betroffenen Dateien sind nur der ausgewählte Stil und jquery-gentleselect (andere CSS-Dateien, die auf die gleiche Weise in den Index importiert werden, funktionieren gut und fehlerfrei). Ich habe meinen MIME-Typ bereits überprüft und text / css ist bereits in CSS.

Ehrlich gesagt möchte ich zunächst das Problem verstehen (eine Sache, die ich anscheinend nicht alleine tun kann).

Ich möchte zunächst das Problem verstehen

Browser stellen HTTP-Anforderungen an Server. Der Server gibt dann eine HTTP-Antwort.

Sowohl Anfragen als auch Antworten bestehen aus einer Reihe von Kopfzeilen und einem (manchmal optionalen) Textkörper mit einigen Inhalten.

Wenn es einen Text gibt, ist einer der Header derjenige, der Content-Typebeschreibt, was der Text ist (ist es ein HTML-Dokument? Ein Bild? Der Inhalt einer Formularübermittlung? Usw.).

Wenn Sie nach Ihrem Stylesheet fragen, teilt Ihr Server dem Browser mit, dass es sich um ein HTML-Dokument ( Content-Type: text/html) anstelle eines Stylesheets ( Content-Type: text/css) handelt.

Ich habe meinen myme.type bereits überprüft und text / css ist bereits auf css.

Dann sorgt etwas anderes an Ihrem Server dafür, dass dieses Stylesheet den falschen Inhaltstyp hat.

Verwenden Sie die Registerkarte "Netz" der Entwicklertools Ihres Browsers, um die Anforderung und die Antwort zu überprüfen.

Angular verwenden?

Dies ist eine sehr wichtige Einschränkung, an die Sie sich erinnern sollten.

Das Basis-Tag muss sich nicht nur im Kopf befinden, sondern auch an der richtigen Stelle.

Ich hatte mein Basis-Tag an der falschen Stelle im Kopf, es sollte vor Tags mit URL-Anfragen stehen. Das Platzieren als zweites Tag unter dem Titel hat es für mich gelöst.

<base href="/">

Ich schrieb einen kleinen Beitrag auf es hier

Ich hatte auch ein Problem mit diesem Fehler und fand eine Lösung. Dies erklärt nicht, warum der Fehler aufgetreten ist, scheint ihn jedoch in einigen Fällen zu beheben.

Fügen Sie vor dem Pfad zur CSS-Datei einen Schrägstrich / ein :

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

Mein Problem war einfacher als alle Antworten in diesem Beitrag.

Ich musste IIS so einrichten, dass es statischen Inhalt enthält.

Versuche dies <link rel="stylesheet" type="text/css" href="../##/yourcss.css">

Wo ##ist Ihr Ordner? Wo ist Ihre .CSS - Datei?

Vergessen Sie nicht: ..(doppelte Punkte).

Das Festlegen der Anmeldeinformationen für die anonyme Authentifizierung auf Application Pool Identity hat mir geholfen.

Ich hatte auch das gleiche Problem. Und nachdem ich einige Forschungs- und Entwicklungsarbeiten durchgeführt hatte, stellte ich fest, dass das Problem beim Dateinamen lag. Der Name der eigentlichen Datei war "lightgallery.css". aber während der Verknüpfung habe ich "lightGallery.css" eingegeben .

Mehr Info:

Es funktionierte gut auf meinem lokalen Host (Betriebssystem: Windows 8.1 & Server: Apache). Aber als ich meine Anwendung auf einen Remote-Server hochgeladen habe (ein anderes Betriebssystem und ein anderer Webserver als mein lokaler Host), hat es nicht funktioniert und mir den gleichen Fehler wie Ihrem gegeben.

Das Problem war also die Groß- und Kleinschreibung (in Bezug auf Dateinamen) des Servers.

Basierend auf den anderen Antworten scheint es, dass diese Nachricht viele Ursachen hat. Ich dachte, ich würde nur meine individuelle Lösung teilen, falls jemand in Zukunft mein genaues Problem hat.

Unsere Site lädt die CSS-Dateien aus einer AWS Cloudfront-Distribution, die einen S3-Bucket als Ursprung verwendet. Dieser spezielle S3-Bucket wurde mit einem Linux-Server synchronisiert, auf dem Jenkins ausgeführt wird. Der syncBefehl via s3cmdsetzt den Inhaltstyp für das S3-Objekt automatisch basierend auf den Angaben des Betriebssystems (vermutlich basierend auf der Dateierweiterung). Aus irgendeinem Grund wurden auf unserem Server alle Typen korrekt eingestellt, mit Ausnahme der .cssDateien, die den Typ angegeben haben text/plain. Wenn Sie in S3 die Metadaten in den Eigenschaften einer Datei überprüfen, können Sie den Typ auf einen beliebigen Wert festlegen. Wenn Sie festlegen, text/cssdass unsere Site die Dateien korrekt als CSS interpretieren und korrekt laden kann.

Wenn Sie statisches CSS mit Nginx bereitstellen, sollten Sie hinzufügen

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

oder

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

zu nginx conf

Die Antwort von @Rob Sedgwick gab mir einen Hinweis. In meinem Fall war meine App jedoch eine Spring Boot-Anwendung . Also habe ich in meiner Sicherheitskonfiguration nur Ausschlüsse für die Pfade zu den betroffenen Dateien hinzugefügt ...

HINWEIS - Diese Lösung basiert auf SpringBoot. Was Sie möglicherweise tun müssen, hängt möglicherweise davon ab, welche Programmiersprache Sie verwenden und / oder welches Framework Sie verwenden

Der zu beachtende Punkt ist jedoch;

Im Wesentlichen kann das Problem verursacht werden, wenn jede Anforderung, einschließlich der für statischen Inhalt, authentifiziert wird.

Nehmen wir also an, einige Pfade zu meinem statischen Inhalt, die die Fehler verursacht haben, lauten wie folgt:

Ein Pfad namens "Plugins"

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

Und ein Pfad namens "Seiten"

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

Dann füge ich einfach die folgenden Ausschlüsse in meine Spring Boot-Sicherheitskonfiguration ein.

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

}

Prost!

Angular verwenden

In meinem Fall mit ng-hrefanstatt hrefes für mich zu lösen.

Hinweis :

Ich arbeite mit Laravel als Backend

Ich stand vor der gleichen Sache, mit einer Art der gleichen .htaccess-Datei, um hübsche URLs zu erstellen. nach einigen Stunden des Umschauens und Experimentierens. Ich fand heraus, dass der Fehler auf relativ verknüpfte Dateien zurückzuführen war.

Der Browser beginnt mit dem Abrufen derselben HTML-Quelldatei für alle CSS-, JS- und Bilddateien, wenn ich ein paar Schritte tief in den Server blättern würde.

Um dem entgegenzuwirken, können Sie entweder das <base>Tag in Ihrer HTML-Quelle verwenden.

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

und Link zu Dateien wie,

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

oder verwenden Sie absolute Links für alle Ihre Dateien.

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

Wenn Sie mit JSP arbeiten, kann dieses Problem durch Ihre Servlet-Zuordnung verursacht werden. Wenn Ihre Zuordnung die URL standardmäßig wie folgt annimmt:

@WebServlet("/")

Dann interpretiert der Container Ihre CSS-URL und wechselt zum Servlet, anstatt zur CSS-Datei.

Ich hatte das gleiche Problem, ich habe mein Mapping geändert und jetzt funktioniert alles

Ich habe ein ähnliches Problem in MVC4 bei der Formularauthentifizierung. Das Problem war diese Zeile in der web.config,

<modules runAllManagedModulesForAllRequests="true">

Dies bedeutet, dass jede Anforderung, einschließlich der für statischen Inhalt, authentifiziert wird.

Ändern Sie diese Zeile in:

<modules runAllManagedModulesForAllRequests="false">

Ich habe dieses Problem auch kürzlich auf Chrom . Ich gebe nur den absoluten Pfad zu meinem CSS-Dateiproblem an.

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

Ich möchte auf Todd Rs Punkt im OP eingehen. Auf asp.net-Seiten web.configdefiniert die Datei die Berechtigungen, die für den Zugriff auf jede Datei oder jeden Ordner in der Anwendung erforderlich sind. In unserem Fall erlaubte der Ordner mit CSS-Dateien nicht autorisierten Benutzern den Zugriff, sodass er auf der Anmeldeseite fehlschlug, bevor der Benutzer autorisiert wurde. Durch Ändern der erforderlichen Berechtigungen für web.confignicht autorisierte Benutzer, um auf die CSS-Dateien zuzugreifen, wurde dieses Problem behoben.

Für den Fall, dass jemand zu diesem Beitrag kommt und ein ähnliches Problem hat. Ich hatte gerade ein ähnliches Problem, aber die Lösung war recht einfach.

Ein Entwickler hatte fälschlicherweise eine Kopie der Datei web.config in das CSS-Verzeichnis gestellt. Nach dem Löschen wurden alle Fehler behoben und die Seite ordnungsgemäß angezeigt.

Ich bin auf dasselbe Problem gestoßen, als ich die Arbeit an einem alten MEAN-Stack-Projekt wieder aufgenommen habe. Ich habe nodemonals lokaler Entwicklungsserver verwendet und den gleichen Fehler erhalten Resource interpreted as stylesheet but transferred with MIME type text/html. Ich habe von nodemonzu geändert , http-serverwas hier zu finden ist . Es hat sofort bei mir funktioniert.

Dies liegt daran, dass Sie den Inhaltstyp für Ihre Serverseite (php, node.js usw.) als text / html anstelle von text / css festgelegt haben müssen.

Dies trat auf, als ich das Protokoll aus dem CSS-Link für ein CSS-Stylesheet entfernte, das von einem Google CDN bereitgestellt wird.

Dies gibt keinen Fehler:

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

Dies führt jedoch zu dem Fehler Ressource, der als Stylesheet interpretiert, aber mit dem MIME-Typ text / html übertragen wird :

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

Ich hatte ein ähnliches Problem. Und Entdecken von Lösungen auf dieser fantastischen Stapelüberlaufseite.

Die Antwort von user54861 ​​(nicht übereinstimmende Namen bei Sensibilität) macht mich neugierig, meinen Code erneut zu überprüfen, und stellte fest, dass " ich nicht zwei js-Dateien hochgeladen habe, die ich in das Head-Tag geladen habe ". :-)

Wenn ich sie hochgeladen habe, läuft das Problem weg! Und Code wird ausgeführt und die Seite ohne weiteren Fehler gerendert!

Die Moral der Geschichte ist also, nicht zu vergessen, sicherzustellen, dass alle Ihre js-Dateien dort hochgeladen werden, wo die Seite nach ihnen sucht.

Ich bin auf dasselbe Problem mit einer .NET-Anwendung gestoßen, einer CMS-Open-Source-Anwendung namens MojoPortal. In einem meiner Themen und Skins für eine bestimmte Site wurde beim Surfen oder Testen die Geschwindigkeit verringert und verlangsamt, als würde sie ersticken.

Mein Problem war nicht das Attribut "Typ" für das CSS, sondern "das andere". Meine genaue Änderung war in der Web.Config . Ich habe alle Werte für MinifyCSS, CacheCssOnserver und CacheCSSinBrowser in FALSE geändert.

Sobald dies festgelegt war, war die Website wieder schnell in Produktion.

Hatte den gleichen Fehler, weil ich vergessen habe, zuerst einen korrekten Header zu senden

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

Verwenden von ReactJs, wenn ich index.html über einen relativen Link wie z

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

und dann navigiere ich zu einer Route, sagen wir; localhost:3000/artistund aktualisieren, ich bekomme den Fehler.

Der Fehler verschwand, nachdem ich den relativen Link durch einen absoluten Link ersetzt hatte.

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

Dieses Problem trat beim Laden von CSS für ein React-Layoutmodul auf, das ich mit npm installiert habe. Sie müssen zwei CSS-Dateien importieren, um dieses Modul zum Laufen zu bringen. Daher habe ich sie zunächst folgendermaßen importiert:

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

fand aber heraus, dass die Dateierweiterung gelöscht werden muss, also funktionierte dies:

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

Wenn nodejs und using express funktionieren, funktioniert der folgende Code ...

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

Ich habe genau das gleiche Problem und nach ein paar Minuten habe ich festgestellt, dass ich die Dateierweiterung nicht zu meinem Header hinzugefügt habe. Also habe ich die folgende Zeile geändert:

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

zu

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

Ich habe heute angefangen, das Problem nur auf Chrome und nicht auf Safari für dasselbe Projekt / dieselbe URL für meinen Goormide-Container (node.js) zu bekommen.

Nachdem ich einige der oben genannten Vorschläge ausprobiert hatte, die anscheinend nicht funktionierten, und einige Codeänderungen, die ich von gestern bis heute vorgenommen hatte, zurückverfolgte, was ebenfalls keinen Unterschied machte, landete ich in den Chrome-Einstellungen und klickte auf:

1.Einstellungen;

2. Scrollen Sie nach unten und wählen Sie: "Erweitert";

3. Scrollen Sie nach unten und wählen Sie: "Einstellungen auf ihre ursprünglichen Standardeinstellungen zurücksetzen";

Das scheint das Problem behoben zu haben, da ich die Warnung / den Fehler in der Konsole nicht mehr erhalte und die Seite so angezeigt wird, wie sie sollte. Beim Lesen der obigen Beiträge scheint das Problem aus einer beliebigen Anzahl von Quellen auftreten zu können, sodass das Zurücksetzen der Einstellungen eine potenzielle generische Lösung darstellt. Prost

Wenn Sie die App in Prod bereitstellen, stellen Sie sicher, dass Sie die statischen Dateien mit dem Service Worker bereitstellen. Ich hatte diesen Fehler, als ich nur den statischen Unterordner von React Build auf Django bereitstellte (ohne Assets mit Stilen).

Verwenden von React

Ich bin auf diesen Fehler in meiner Reaktionsprofil-App gestoßen. Meine App hat sich so verhalten, als würde sie versuchen, auf eine nicht vorhandene URL zu verweisen. Ich glaube, das hat etwas damit zu tun, wie sich Webpack verhält.

Wenn Sie Dateien in Ihrem öffentlichen Ordner verknüpfen, müssen Sie daran denken,% PUBLIC_URL% vor der Ressource wie folgt zu verwenden:

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