it-swarm.com.de

Ressource wird als Stylesheet interpretiert, jedoch mit dem MIME-Typ Text/HTML übertragen (scheint nicht mit dem Webserver zu tun zu haben)

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

Ressource wird als Stylesheet interpretiert, jedoch mit dem MIME-Typ "text/html" übertragen

Die Dateien, die von diesem Fehler betroffen sind, sind nur Style, selected und jquery-gentleselect. Ich habe meinen MIME-Typ bereits überprüft und der Text/CSS ist bereits in CSS.

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

133
Max

ich möchte damit beginnen, das Problem zu verstehen

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

Sowohl Anforderungen als auch Antworten bestehen aus einer Reihe von Kopfzeilen und einem (manchmal optionalen) Textkörper mit etwas Inhalt.

Wenn es einen Body gibt, ist einer der Header der Content-Type, der beschreibt, was der Body 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 Stylesheet (Content-Type: text/css) handelt.

Ich habe mein myme.type bereits geprüft und text/css ist bereits auf css.

Dann wird Ihr Stylesheet durch einen anderen Inhaltstyp auf den Server gebracht.

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

57
Quentin

Angular verwenden?

Dies ist eine sehr wichtige Einschränkung.

Das Basis-Tag muss sich nicht nur im Kopf befinden, sondern auch am richtigen Ort.

Ich hatte mein Basis-Tag an der falschen Stelle im Kopf, es sollte vor allen Tags mit URL-Anfragen kommen. Grundsätzlich als zweiten Tag unter dem Titel zu platzieren, löste es für mich. 

<base href="/">

Ich habe einen kleinen Beitrag darüber geschrieben hier

88
Sten Muchow

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

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

<link rel="stylesheet" href="/css/bootstrap.min.css">

21
Trilochan

Versuchen Sie diesen <link rel="stylesheet" type="text/css" href="../##/yourcss.css"> 

dabei ist ## Ihr Ordner, in dem sich Ihre .CSS-Datei befindet

Vergessen Sie nicht: .. (doppelte Punkte). 

9
seq

Ich stand auch vor dem gleichen Problem. Nach einigen Forschungs- und Entwicklungsarbeiten stellte ich fest, dass das Problem beim Dateinamen lag. Der Name der eigentlichen Datei war "lightgallery.css" , aber beim Linken habe ich "lightGallery.css" eingegeben. 

Mehr Info:

Es funktionierte gut auf meinem localhost (Betriebssystem: Windows 8.1 & Server: Apache) .. Als ich jedoch meine Anwendung auf einen Remote-Server (ein anderes Betriebssystem und einen anderen Webserver als mein localhost) hochlud, funktionierte es nicht derselbe Fehler wie bei Ihnen.

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

7

Mein Thema war einfacher als alle Antworten in diesem Beitrag. 

Ich musste IIS einrichten, um statischen Inhalt aufzunehmen.

 enter image description here

7
JEuvin

@Rob Sedgwicks Antwort 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 ist SpringBoot-basiert ... Was Sie möglicherweise tun müssen, hängt von der verwendeten Programmiersprache und/oder dem verwendeten Framework ab.

Der zu beachtende Punkt ist jedoch:

Im Wesentlichen kann das Problem verursacht werden, wenn jede Anforderung, einschließlich diejenigen für statische Inhalte werden authentifiziert.

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

Ein Pfad mit dem Namen "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 die Ausschlüsse wie folgt in meiner Spring Boot Security Config hinzu.

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

}


Wenn diese Pfade "/plugins/**" und "/pages/**" von der Authentifizierung ausgeschlossen wurden, sind die Fehler nicht mehr vorhanden. 


Prost!

5
CodeBurner

Basierend auf den anderen Antworten scheint es, als hätte diese Nachricht viele Ursachen. Ich dachte, ich würde einfach meine individuelle Lösung für den Fall teilen, dass jemand mein genaues Problem in der Zukunft hat. 

Unsere Website lädt die CSS-Dateien von einer AWS Cloudfront-Distribution, die einen S3-Bucket als Origin verwendet. Dieser bestimmte S3-Bucket wurde mit einem Linux-Server synchronisiert, auf dem Jenkins ausgeführt wird. Der Befehl sync über s3cmd setzt 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 festgelegt, mit Ausnahme von .css-Dateien, die den Typ text/plain gegeben haben. Wenn Sie in S3 die Metadaten in den Eigenschaften einer Datei überprüfen, können Sie den Typ auf den gewünschten Wert setzen. Durch die Einstellung auf text/css konnte unsere Website die Dateien korrekt als CSS interpretieren und korrekt laden.

4
nicolashahn

Verwenden von Angular

In meinem Fall löste ich ng-href anstelle von href.

Hinweis :

Ich arbeite mit Laravel als Backend

4
Peter Wilson

Durch das Festlegen der anonymen Authentifizierungsberechtigungen auf Application Pool Identity wurde der Trick für mich ausgeführt.

 enter image description here

4
Felipe Cruz

Wenn Sie mit JSP arbeiten, kann dieses Problem von Ihrem Servlet-Mapping stammen.

@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

3
Greg Artisi

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 Anfrage, einschließlich derjenigen für statische Inhalte, authentifiziert wird.

Ändern Sie diese Zeile in:

<modules runAllManagedModulesForAllRequests="false">
2
Rob Sedgwick

ich stand vor der gleichen Sache, mit der gleichen .htaccess-Datei für die Erstellung hübscher URLs. Nach ein paar Stunden umsehen und experimentieren. Ich fand heraus, dass der Fehler auf relativ verknüpfte Dateien zurückzuführen war. 

der Browser holt die gleiche Quell-HTML-Datei für alle CSS-, Js- und Image-Dateien, wenn ich ein paar Schritte tief in den Server einsteigen würde.

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

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

und verlinken 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" />
2
Light93

 enter image description here Dieses Problem habe ich kürzlich auch bei chrome. Ich gebe einfach den absoluten Pfad zu meiner CSS-Datei, um das Problem zu lösen.

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

Hatte den gleichen Fehler, weil ich vergessen hatte, zuerst einen richtigen Header zu senden

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

Beim Laden von CSS für ein React Layoutmodul, das ich mit npm installiert habe, ist dieses Problem aufgetreten. 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, so dass dies funktionierte:

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

Mit einer .NET-Anwendung, einer CMS-Open-Source namens MojoPortal, bin ich auf dasselbe Problem gestoßen. In einem meiner Themen und einem Skin für eine bestimmte Website würde es beim Durchsuchen oder Testen grindeln und langsamer werden, als würde es ersticken.

Mein Problem war nicht das "type" -Attribut 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 eingestellt war, war die Website wieder schnell in Produktion.

0
HI360

Falls jemand zu diesem Beitrag kommt und ein ähnliches Problem hat. Ich hatte gerade ein ähnliches Problem, aber die Lösung war ziemlich einfach. 

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

0
Hideous1

Wenn Sie statische 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;
}

zu nginx conf

Ich möchte auf den Standpunkt von Todd R im OP eingehen. In asp.net-Seiten definiert die Datei web.config die erforderlichen Berechtigungen, um auf jede Datei oder jeden Ordner in der Anwendung zuzugreifen. In unserem Fall erlaubte der Ordner der CSS-Dateien keinen Zugriff für nicht autorisierte Benutzer, sodass auf der Anmeldeseite ein Fehler auftritt, bevor der Benutzer autorisiert wurde. Durch Ändern der erforderlichen Berechtigungen in web.config konnten nicht autorisierte Benutzer auf die CSS-Dateien zugreifen. Dieses Problem wurde behoben.

0
Sandy Gettings

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

Dies gibt keinen Fehler:

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

Dies gibt jedoch den Fehler Ressource als Stylesheet interpretiert, aber mit dem MIME-Typ text/html übertragen:

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

Dies liegt daran, dass Sie für Ihre Server-Seite als Inhaltstyp "text/html" anstelle von "text/css" festgelegt haben müssen (PHP, node.js usw.).

0
Ayush Agarwal

Wenn nodejs und mit express Der untenstehende Code für mich funktioniert

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

Ich war mit einem ähnlichen Problem konfrontiert. Auf dieser fantastischen Stack Overflow-Seite finden Sie Lösungen.

die Antwort von user54861 ​​(nicht übereinstimmende Namen bei Sensibilität) macht mich neugierig darauf, meinen Code erneut zu untersuchen, und stellte fest, dass " ich keine zwei js-Dateien hochgeladen habe, die ich in head tag " geladen habe. :-)

Wenn ich sie hochgeladen habe, ist das Problem weg! Und Code läuft und Seite ohne einen anderen Fehler gerendert!

Die Moral der Geschichte ist also nicht zu vergessen, dass alle Ihre js-Dateien dort hochgeladen werden, wo sie von der Seite gesucht werden.

0
Hossein Khalesi

Mit ReactJs, wenn ich index.html mit einem relativen Link wie

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

und dann navigiere ich zu einer Route sagen; localhost:3000/artist und aktualisieren, ich erhalte den Fehler. 

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

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

0
Frank Fotangs

In meinem Fall kam der gleiche Fehler mit JSP. So bin ich an die Wurzel dieses Problems gelangt: Ich ging zur Registerkarte "Netzwerk" und sah eindeutig, dass die Browseranforderung zum Abrufen der css einen Antwortheader mit "Content-type": "text/html" zurückgab. Ich öffnete eine weitere Registerkarte und drückte manuell die Anforderung, um die CSS abzurufen. Am Ende gab es ein HTML-Log in Form zurück. Es stellt sich heraus, dass meine Webanwendung eine URL-Zuordnung für Pfad = / Tomcat-Servlet-Eintrag hatte: (@WebServlet({ "/, /index", }). Daher wurden alle nicht übereinstimmenden Anforderungs-URLs irgendwie mit / abgeglichen, und das entsprechende Servlet gab ein Log in HTML-Formular zurück. Ich habe es behoben, indem ich die Zuordnung zu / entfernte.

Auch die Tomcat-Konfiguration für das Handling von MIME-TYPE war bereits vorhanden.

0
Binita Bharati

Ich bin auf das gleiche Problem gestoßen, als ich die Arbeit an einem alten MEAN-Stack-Projekt fortsetzte. Ich verwendete nodemon als meinen lokalen Entwicklungsserver und erhielt den gleichen Fehler Resource interpreted as stylesheet but transferred with MIME type text/html. Ich änderte von nodemon zu http-server den hier . Es hat sofort für mich funktioniert.

0
captainkirk