Ressource interprétée comme feuille de style mais transférée avec du type MIME text / html (ne semble pas liée au serveur Web)

J'ai ce problème. Chrome continue de renvoyer cette erreur

Ressource interprétée comme une feuille de style mais transférée avec du type MIME text / html

Les fichiers affectés par cette erreur sont juste le style, choisi et jquery-gentleselect (les autres fichiers CSS qui sont importés dans l'index de la même manière fonctionnent bien et sans erreur). J'ai déjà vérifié mon type MIME et text / css est déjà sur CSS.

Honnêtement, j'aimerais commencer par comprendre le problème (une chose que je ne peux pas faire seul).

je voudrais commencer par comprendre le problème

Les navigateurs envoient des requêtes HTTP aux serveurs. Le serveur fait alors une réponse HTTP.

Les demandes et les réponses se composent d'un ensemble d'en-têtes et d'un corps (parfois facultatif) contenant du contenu.

S'il y a un corps, l'un des en-têtes est le Content-Type qui décrit ce qu'est le corps (est-ce un document HTML? Une image? Le contenu d'une soumission de formulaire? Etc.).

Lorsque vous demandez votre feuille de style, votre serveur indique au navigateur qu'il s'agit d'un document HTML ( Content-Type: text/html) au lieu d'une feuille de style ( Content-Type: text/css).

J'ai déjà vérifié mon myme.type et text / css est déjà sur css.

Ensuite, quelque chose d'autre sur votre serveur est de faire en sorte que cette feuille de style soit livrée avec le mauvais type de contenu.

Utilisez l'onglet Net des outils de développement de votre navigateur pour examiner la demande et la réponse.

Vous utilisez Angular?

C'est une mise en garde très importante à retenir.

La balise de base doit non seulement être dans la tête, mais au bon endroit.

J'avais ma balise de base au mauvais endroit dans la tête, elle devrait venir avant toutes les balises avec des demandes d'URL. En gros, le placer comme deuxième balise sous le titre l'a résolu pour moi.

<base href="/">

J'ai écrit un petit article dessus ici

J'ai également eu un problème avec cette erreur et j'ai trouvé une solution. Cela n'explique pas pourquoi l'erreur s'est produite, mais cela semble la corriger dans certains cas.

Incluez une barre oblique / avant le chemin du fichier css, comme ceci:

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

Mon problème était plus simple que toutes les réponses de cet article.

J'ai dû configurer IIS pour inclure du contenu statique.

Essaye ça <link rel="stylesheet" type="text/css" href="../##/yourcss.css">

où ## est votre dossier dans lequel se trouve votre fichier .CSS

N'oubliez pas les: ..(doubles points).

La définition des informations d'identification d'authentification anonymes sur l' identité du pool d'applications a fait l'affaire pour moi.

J'étais également confronté au même problème. Et après avoir fait de la R&D, j'ai trouvé que le problème venait du nom du fichier. Le nom du fichier actuel était "lightgallery.css" mais lors de la liaison, j'ai tapé "lightGallery.css" .

Plus d'informations:

Cela a bien fonctionné sur mon hôte local (OS: Windows 8.1 et serveur: Apache). Mais lorsque j'ai téléchargé mon application sur un serveur distant (OS et serveur Web différents de ceux de mon hôte local), cela ne fonctionnait pas, me donnant la même erreur que le vôtre.

Le problème était donc la sensibilité à la casse (en ce qui concerne les noms de fichiers) du serveur.

Sur la base des autres réponses, il semble que ce message ait de nombreuses causes, j'ai pensé partager ma solution individuelle au cas où quelqu'un aurait mon problème exact à l'avenir.

Notre site charge les fichiers CSS à partir d'une distribution AWS Cloudfront, qui utilise un compartiment S3 comme origine. Ce compartiment S3 particulier a été synchronisé avec un serveur Linux exécutant Jenkins. La synccommande via s3cmddéfinit automatiquement le type de contenu de l'objet S3 en fonction de ce que dit le système d'exploitation (probablement en fonction de l'extension de fichier). Pour une raison quelconque, sur notre serveur, tous les types étaient correctement définis, sauf les .cssfichiers, auxquels il donnait le type text/plain. Dans S3, lorsque vous vérifiez les métadonnées dans les propriétés d'un fichier, vous pouvez définir le type comme vous le souhaitez. Le paramétrer pour text/csspermettre à notre site d'interpréter correctement les fichiers en CSS et de se charger correctement.

Si vous servez du CSS statique avec nginx, vous devez ajouter

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

ou

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

à nginx conf

La réponse de @Rob Sedgwick m'a donné un pointeur, cependant, dans mon cas, mon application était une application Spring Boot . Je viens donc d'ajouter des exclusions dans ma configuration de sécurité pour les chemins vers les fichiers concernés ...

REMARQUE - Cette solution est basée sur SpringBoot ... Ce que vous devrez peut-être faire peut différer en fonction du langage de programmation que vous utilisez et / ou du framework que vous utilisez

Cependant, le point à noter est;

Essentiellement, le problème peut être causé lorsque chaque demande, y compris celles relatives au contenu statique, est authentifiée.

Alors disons que certains chemins vers mon contenu statique qui causaient les erreurs sont les suivants;

Un chemin appelé "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

Et un chemin appelé "pages"

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

Ensuite, j'ajoute simplement les exclusions comme suit dans ma configuration de sécurité Spring Boot;

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

}

À votre santé!

Utilisation angulaire

Dans mon cas, utiliser ng-hrefau lieu de le hrefrésoudre pour moi.

Remarque :

Je travaille avec laravel comme back-end

J'étais confronté à la même chose, avec une sorte du même fichier .htaccess pour créer de jolies URL. après quelques heures de recherche et d'expérimentation. J'ai découvert que l'erreur était due à des fichiers relativement liés.

le navigateur commencera à récupérer le même fichier html source pour tous les fichiers css, js et image, lorsque je parcourrais quelques étapes profondément dans le serveur.

pour contrer cela, vous pouvez soit utiliser la <base>balise sur votre source html,

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

et un lien vers des fichiers comme,

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

ou utilisez des liens absolus pour tous vos fichiers.

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

Si vous êtes sur JSP, ce problème peut provenir de votre mappage de servlet. si votre mappage prend l'URL par défaut comme ceci:

@WebServlet("/")

puis le conteneur interprète votre url css et accède au servlet au lieu d'aller dans le fichier css.

J'ai eu le même problème, j'ai changé ma cartographie et maintenant tout fonctionne

J'ai un problème similaire dans MVC4 en utilisant l'authentification par formulaire. Le problème était cette ligne dans le web.config,

<modules runAllManagedModulesForAllRequests="true">

Cela signifie que chaque demande, y compris celles relatives au contenu statique, est authentifiée.

Remplacez cette ligne par:

<modules runAllManagedModulesForAllRequests="false">

Je suis également confronté à ce problème récemment sur chrome . Je donne juste le chemin absolu à mon problème de fichier CSS.

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

Je veux développer le point de Todd R dans l'OP. Dans les pages asp.net, le web.configfichier définit les autorisations nécessaires pour accéder à chaque fichier ou dossier de l'application. Dans notre cas, le dossier des fichiers CSS n'autorisait pas l'accès pour les utilisateurs non autorisés, provoquant son échec sur la page de connexion avant que l'utilisateur ne soit autorisé. La modification des autorisations requises dans web.configles utilisateurs non autorisés autorisés à accéder aux fichiers CSS et a résolu ce problème.

Au cas où quelqu'un viendrait à ce message et aurait un problème similaire. Je viens de rencontrer un problème similaire, mais la solution était assez simple.

Un développeur avait par erreur déposé une copie de web.config dans le répertoire CSS. Une fois supprimées, toutes les erreurs ont été résolues et la page correctement affichée.

Je suis tombé sur le même problème en reprenant le travail sur un ancien projet de pile MEAN. J'utilisais nodemoncomme serveur de développement local et j'ai eu la même erreur Resource interpreted as stylesheet but transferred with MIME type text/html. J'ai changé de nodemonà http-serverqui peut être trouvé ici . Cela a immédiatement fonctionné pour moi.

C'est parce que vous devez avoir défini le type de contenu comme texte / html au lieu de texte / css pour la page de votre serveur (php, node.js, etc.)

Cela s'est produit lorsque j'ai supprimé le protocole du lien css pour une feuille de style css servie par un google CDN.

Cela ne donne aucune erreur:

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

Mais cela donne l'erreur Resource interprétée comme une feuille de style mais transférée avec le type MIME text / html :

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

J'étais confronté à un problème similaire. Et explorez les solutions dans cette fantastique page Stack Overflow.

La réponse de user54861 ​​(noms incompatibles en cas de sensibilité à la casse) me rend curieux d'inspecter à nouveau mon code et de réaliser que " je n'ai pas téléchargé deux fichiers js que je les ai chargés dans la balise head ". :-)

Lorsque je les ai téléchargés, le problème s'enfuit! Et le code s'exécute et la page est rendue sans autre erreur!

Donc, la morale de l'histoire est de ne pas oublier de vous assurer que tous vos fichiers js sont téléchargés là où la page les recherche.

Je suis tombé sur le même problème avec une application .NET, un CMS open-source appelé MojoPortal. Dans l'un de mes thèmes et skin pour un site particulier, lors de la navigation ou du test, il grinçait et ralentissait comme s'il étouffait.

Mon problème n'était pas de l'attribut "type" pour le CSS mais c'était "cette autre chose". Mon changement exact était dans le Web.Config . J'ai changé toutes les valeurs en FALSE pour MinifyCSS, CacheCssOnserver et CacheCSSinBrowser.

Une fois que cela a été défini, le site Web était de nouveau en production rapide.

J'ai eu la même erreur parce que j'ai oublié d'envoyer un en-tête correct un premier

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

En utilisant ReactJs, lorsque j'ajoute un fichier de style à index.html en utilisant un lien relatif tel que

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

et puis je navigue vers une route dire; localhost:3000/artistet rafraîchir, j'obtiens l'erreur.

L'erreur a disparu après avoir remplacé le lien relatif par un lien absolu, disons;

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

J'ai rencontré ce problème lors du chargement de CSS pour un module de mise en page React que j'ai installé avec npm. Vous devez importer deux fichiers .css pour que ce module fonctionne, donc je les ai initialement importés comme ceci:

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

mais a découvert que l'extension de fichier doit être supprimée, donc cela a fonctionné:

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

Si nodejs et en utilisant express, le code ci-dessous fonctionne ...

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

J'ai exactement le même problème et après quelques minutes à me tromper, j'ai déchiffré que j'avais manqué d'ajouter l'extension de fichier à mon en-tête. j'ai donc changé la ligne suivante:

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

à

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

J'ai commencé à avoir le problème aujourd'hui uniquement sur chrome et non sur Safari pour le même projet / URL pour mon conteneur goormide (node.js)

Après avoir essayé plusieurs suggestions ci-dessus qui ne semblaient pas fonctionner et revenir en arrière sur certaines modifications de code que j'ai apportées d'hier à aujourd'hui, ce qui n'a également fait aucune différence, j'ai fini dans les paramètres de chrome en cliquant sur:

1. paramètres;

2. faites défiler vers le bas, sélectionnez: "Avancé";

3. faites défiler vers le bas, sélectionnez: "Restaurer les paramètres par défaut";

Cela semble avoir résolu le problème car je ne reçois plus l'avertissement / l'erreur dans la console et la page s'affiche comme il se doit. En lisant les articles ci-dessus, il semble que le problème peut survenir à partir de n'importe quel nombre de sources, de sorte que la réinitialisation des paramètres est un correctif générique potentiel. À votre santé

Si vous diffusez l'application en production, assurez-vous que vous diffusez les fichiers statiques avec le service worker. J'ai eu cette erreur lorsque je ne servais que le sous-dossier statique de React build sur Django (sans les actifs qui ont des styles)

Utilisation de React

Je suis tombé sur cette erreur dans mon application de profil de réaction. Mon application s'est comportée un peu comme si elle essayait de référencer une URL qui n'existe pas. Je pense que cela a quelque chose à voir avec le comportement de Webpack.

Si vous liez des fichiers dans votre dossier public, vous devez vous rappeler d'utiliser% PUBLIC_URL% avant la ressource comme ceci:

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