Ressource interprétée comme une feuille de style mais transférée avec le type MIME text/html (semble ne pas être liée au serveur Web)
J'ai ce problème. Chrome continue à renvoyer cette erreur
Ressource interprétée comme une feuille de style mais transférée avec le type MIME text/html
Les fichiers concernés par cette erreur sont uniquement le style, choisi et jquery-gentleselect (d'autres fichiers CSS 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 qui me semble impossible à faire seule).
je voudrais commencer par comprendre le problème
Les navigateurs adressent des requêtes HTTP aux serveurs. Le serveur effectue ensuite une réponse HTTP.
Les demandes et les réponses consistent en un en-tête et un corps (parfois facultatif) contenant du contenu.
S'il existe un corps, l'un des en-têtes est le Content-Type qui décrit ce qu'est le corps (s'agit-il d'un document HTML? D'une image? Du 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) et non 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 fait en sorte que la feuille de style vienne avec le type de contenu incorrect.
Utilisez l'onglet Net des outils de développement de votre navigateur pour examiner la demande et la réponse.
Utilisation angulaire?
C'est une mise en garde très importante à retenir.
La balise de base doit être non seulement dans la tête, mais au bon endroit.
J'avais mon étiquette de base au mauvais endroit dans la tête, elle devrait précéder toutes les étiquettes avec des demandes d'URL. En le plaçant essentiellement comme deuxième balise sous le titre, je l'ai résolu.
<base href="/">
J'ai écrit un petit post dessus ici
J'ai aussi eu un problème avec cette erreur et suis tombé sur une solution. Cela n’explique pas pourquoi l’erreur est survenue, mais il semble que cela soit corrigé dans certains cas.
Incluez une barre oblique/avant le chemin du fichier css, comme suit:
<link rel="stylesheet" href="/css/bootstrap.min.css">
Essayez ce <link rel="stylesheet" type="text/css" href="../##/yourcss.css">
où ## est votre dossier où est votre fichier .CSS
N'oubliez pas le: .. (points doubles).
Je faisais également face au même problème. Et après quelques travaux de R & D, j’ai trouvé que le problème était lié au 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 (système d'exploitation: Windows 8.1 et serveur: Apache) . Mais lorsque j'ai téléchargé mon application sur un serveur distant (système d'exploitation et serveur Web différent de celui de mon hôte local), cela ne fonctionnait Même erreur que la tienne.
Le problème était donc la sensibilité à la casse (en ce qui concerne les noms de fichiers) du serveur.
Mon problème était plus simple que toutes les réponses de cet article.
Je devais configurer IIS pour inclure du contenu statique.
La réponse de @Rob Sedgwick m'a donné un pointeur. Cependant, dans mon cas, mon application était une application d'amorçage de printemps. J'ai donc ajouté des exclusions dans ma configuration de sécurité pour les chemins d'accès aux fichiers concernés ...
NOTE - Cette solution est basée sur SpringBoot ... Ce que vous devrez peut-être faire peut varier en fonction du langage de programmation que vous utilisez et/ou du framework que vous utilisez
Cependant, le point à noter est;
En gros, le problème peut survenir à chaque demande, y compris ceux du contenu statique sont en cours d'authentification.
Alors disons quelques chemins vers mon contenu statique qui étaient à l’origine des erreurs sont les suivants:
Un chemin appelé "plugins"
http: // localhost: 8080/plugins/styles/css/file-1.css
Et un chemin appelé "pages"
http: // localhost: 8080/pages/styles/css/style-1.css
J'ajoute ensuite les exclusions comme suit dans ma configuration de sécurité pour le démarrage du printemps;
@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
}
}
Exclure ces chemins
"/plugins/**" et "/pages/**" de l'authentification a fait disparaître les erreurs. À votre santé!
Sur la base des autres réponses, il semble que ce message ait beaucoup de causes. Je pensais donc partager ma solution individuelle au cas où quelqu'un aurait exactement le même problème à l'avenir.
Notre site charge les fichiers CSS à partir d'une distribution AWS Cloudfront, qui utilise un compartiment S3 comme origine. Ce compartiment S3 a été synchronisé avec un serveur Linux exécutant Jenkins. La commande sync via s3cmd définit le type de contenu pour l'objet S3 automatiquement 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 configurés correctement à l'exception des fichiers .css, 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 à votre guise. La définition de text/css a permis à notre site d’interpréter correctement les fichiers en tant que CSS et de se charger correctement.
Utilisation angulaire
Dans mon cas, utiliser ng-href au lieu de href l'a résolu pour moi.
Remarque :
Je travaille avec laravel comme back-end
Définir les informations d'identification de l'authentification anonyme sur Identité du pool d'applications a été décisif.
Si vous êtes sur JSP, ce problème peut provenir du mappage de votre servlet . Si votre mappage prend l’URL par défaut comme ceci:
@WebServlet("/")
ensuite, le conteneur interprète votre URL css et va à la servlet au lieu d'aller au 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 formulaires. Le problème était cette ligne dans le web.config,
<modules runAllManagedModulesForAllRequests="true">
Cela signifie que toutes les demandes, y compris celles concernant le contenu statique, sont authentifiées.
Remplacez cette ligne par:
<modules runAllManagedModulesForAllRequests="false">
je faisais face à la même chose, avec en quelque sorte le même fichier .htaccess pour créer de jolies urls. après quelques heures de recherche et d'expérimentation. J'ai découvert que l'erreur était due à la liaison de fichiers relativement.
le navigateur va commencer à chercher le même fichier html source pour tous les fichiers css, js et image, lorsque je parcourrai quelques étapes en profondeur dans le serveur.
pour contrer cela, vous pouvez soit utiliser la balise <base> 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" />
Je suis également confronté à ce problème récemment sur chrome. Je viens de donner le chemin absolu à mon problème de fichier CSS résoudre.
<link rel="stylesheet" href="<?=SS_URL?>arica/style.css" type="text/css" />
A eu la même erreur parce que j'ai oublié d'envoyer un premier en-tête correct
header("Content-type: text/css; charset: UTF-8");
print 'body { text-align: justify; font-size: 2em; }';
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 découvert que l'extension de fichier doit être supprimée, donc cela a fonctionné:
@import "../../../../node_modules/react-grid-layout/css/styles";
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 ma peau pour un site particulier, lors de la navigation ou du test, il était possible de ralentir et de ralentir comme s'il était étouffant.
Mon problème n'était pas du type "attribut" 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 rapide dans la production.
Au cas où quelqu'un viendrait à ce poste 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 laissé une copie du fichier web.config dans le répertoire CSS. Une fois supprimées, toutes les erreurs ont été résolues et la page correctement affichée.
Au cas où vous serviriez des css statiques avec nginx, vous devriez ajouter
location ~ \.css {
add_header Content-Type text/css;
}
location ~ \.js {
add_header Content-Type application/x-javascript;
}
à nginx conf
Je veux développer le point de Todd R dans le PO. Dans les pages asp.net, le fichier web.config 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 aux utilisateurs non autorisés, ce qui entraînait un échec sur la page de connexion avant l'autorisation de l'utilisateur. La modification des autorisations requises dans web.config a permis aux utilisateurs non autorisés d'accéder aux fichiers CSS et a résolu ce problème.
Cela s'est produit lorsque j'ai supprimé le protocole du lien CSS pour une feuille de style CSS servie par un CDN Google.
Cela ne donne pas d'erreur:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Architects+Daughter">
Mais cela donne l’erreur Ressource interprétée comme feuille de style mais transférée avec le type MIME text/html :
<link rel="stylesheet" href="fonts.googleapis.com/css?family=Architects+Daughter">
C'est parce que vous devez avoir défini le type de contenu text/html au lieu de text/css pour votre page de serveur (php, node.js, etc.)
Si nodejs et en utilisant express Le code ci-dessous fonctionne pour moi
res.set('Content-Type', 'text/css');
Je faisais face à un problème similaire. Et explorer des solutions dans cette fantastique page Stack Overflow.
la réponse de user54861 (noms différents en cas de sensibilité au casier) me rend curieuse d’inspecter à nouveau mon code et réalise que " Je n’ai pas 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 est résolu! Et le code s'exécute et la page est rendue sans autre erreur!
La morale de l’histoire est donc de ne pas oublier de s’assurer que tous vos fichiers js sont téléchargés à l’endroit où la page les recherche.
À l’aide de 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 ensuite je navigue sur un itinéraire, par exemple; localhost:3000/artist et rafraîchir, j'obtiens l'erreur.
L'erreur a disparu après que j'ai remplacé le lien relatif par un lien absolu, par exemple;
<link rel="stylesheet" href="http://localhost/project/public/css/style.css".
Dans mon cas, la même erreur venait avec JSP. Voici comment je suis parvenu à la racine de ce problème: je suis allé à l'onglet Réseau et j'ai clairement vu que la demande du navigateur pour extraire le css renvoyait l'en-tête de réponse avec "Content-type": "text/html". J'ai ouvert un autre onglet et cliquez manuellement sur la demande pour récupérer le css. Il a fini par retourner un formulaire de connexion html. Il s'avère que mon application Web avait un mappage d'URL pour chemin = / entrée de servlet Tomcat: (@WebServlet({ "/, /index", }). Ainsi, toutes les URL de requête qui ne correspondaient pas étaient en quelque sorte associées à / et le servlet correspondant renvoyait un formulaire Log in html. Je l'ai corrigé en supprimant le mappage sur /
De plus, la configuration de Tomcat concernant la gestion des css MIME-TYPE était déjà présente.
Je suis tombé sur le même problème en reprenant le travail sur un ancien projet de pile MEAN. J'utilisais nodemon comme serveur de développement local et le même message d'erreur Resource interpreted as stylesheet but transferred with MIME type text/html. J'ai changé de nodemon à http-server qui peut être trouvé ici . Cela a immédiatement fonctionné pour moi.