Node/Express - Refusé pour appliquer un style à cause de son type MIME "text/html')
J'ai eu ce problème depuis quelques jours et ne pouvez pas sembler obtenir vers le bas de cette. Nous avons fait un très de base node/express app, et essayons de servir nos fichiers statiques en utilisant quelque chose comme ceci:
app.use(express.static(path.join(__dirname, "static")));
Ce n'est ce que j'attends pour pour la plupart. Nous avons quelques dossiers dans notre statique dossier pour notre css et javascript. Nous essayons de charger les css dans notre EJS vue à l'aide de ce chemin d'accès statique:
<link rel="stylesheet" type="text/css" href="/css/style.css">
Lorsque nous avons atteint notre route /
, nous sommes à recevoir tout le contenu mais notre CSS ne se charge pas. Nous sommes à recevoir cette erreur en particulier:
Refusé d'appliquer le style de"http://localhost:3000/css/style.css'
parce que son type MIME "text/html") n'est pas pris en charge la feuille de style MIME
type, et à la stricte MIME de contrôle est activé.
Ce que j'ai essayé:
- Clair MNP Cache /nouvelle Installation
npm verify cache
rm -rf node_modules
npm install
- Effacer Le Cache Du Navigateur
- Différentes modifications de noms de dossier et les références à cet
- Ajout/suppression des barres obliques forme href
- De déplacer le répertoire css à la racine et à servir à partir de là
- Ajout/suppression des barres obliques de
path.join(__dirname, '/static/')
- Il y avait un commentaire à propos d'un travailleur des services éventuellement gâcher les choses dans un github rapport, et semblait à résoudre beaucoup de problèmes des gens. Il n'y a pas de travailleur des services pour nos localhost: https://github.com/facebook/create-react-app/issues/658
- Nous ne sommes pas à l'aide de réagir, mais je suis à saisir toute recherche google je peux trouver
La route:
app.get("/", function(req, res) {
res.render("search");
});
La vue:
<!DOCTYPE html>
<html>
<head>
<title>Search for a Movie</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<h1>Search for a movie</h1>
<form method="POST" action="/results">
<label for="movie-title">Enter a movie title:</label><br>
<input id="movie-title" type="text" name="title"><br>
<input type="submit" value="Submit Search">
</form>
</body>
</html>
Le paquet.json:
{
"name": "express-apis-omdb",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "nodemon index.js",
"lint:js": "node_modules/eslint/bin/eslint.js ././**/*.js --fix; exit 0",
"lint:css": "node_modules/csslint/cli.js public/css/; exit 0"
},
"license": "ISC",
"devDependencies": {
"babel-eslint": "^6.0.4",
"csslint": "^0.10.0",
"eslint": "^2.11.1",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-import": "^1.8.1",
"eslint-plugin-jsx-a11y": "^1.3.0",
"eslint-plugin-react": "^5.1.1"
},
"dependencies": {
"body-parser": "^1.18.2",
"dotenv": "^5.0.0",
"ejs": "^2.5.7",
"express": "^4.13.4",
"morgan": "^1.7.0",
"path": "^0.12.7",
"request": "^2.83.0"
}
}
La structure du projet:
-app
--node_modules
--static
---img
---css
---js
--views
---movie.ejs
---results.ejs
---search.ejs
--index.js
--package-lock.json
--package.json
Remarque: Nous ne sont pas actuellement à l'aide d'un fichier de mise en page pour notre EJS.
Je suis heureux de fournir des informations supplémentaires si nécessaire.
its MIME type ('text/html')
. Débogage à partir de làAutour de Google pour comprendre comment l'exprimer.statique détermine les types de fichiers
Je ne mets pas mes commentaires comme une réponse parce que je sais ce qui est le problème mais pas la solution. Vous avez trouver la solution
Quel est votre statique routeur ressemble, et avez-vous essayez d'utiliser
express.static
?Merci à tous pour vos commentaires, spécifiquement slebetman. L'étudiant avait un espace à la fin du fichier css
/style.css
. Je devrais l'avoir remarqué l'absence de coloration de syntaxe dans le fichier css.
OriginalL'auteur Matthew | 2018-02-14
Vous devez vous connecter pour publier un commentaire.
Le problème est le résultat d'un mauvais nom de fichier. Notre étudiant a un espace à la fin de la
style.css
fichier. Il y avait un peu d'astuce offs, le premier était un manque de coloration syntaxique dans l'éditeur de texte, et le second a été l'éditeur de texte détecter le type de fichier pour d'autres nouvellement créé, fichiers css, mais pas le mal nommé fichier. Supprimer l'espace résolu le problème.Merci slebetman votre aide et de me pointer dans la bonne direction.
OriginalL'auteur Matthew
Ce n'est pas une solution pour votre question, mais cela peut aider quelqu'un d'autre la recherche de solution comme moi. si vous utilisez l'application.obtenir comme ci-dessous:
le modifier :
OriginalL'auteur Ajay Karri