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é:

  1. Clair MNP Cache /nouvelle Installation
    • npm verify cache
    • rm -rf node_modules
    • npm install
  2. Effacer Le Cache Du Navigateur
  3. Différentes modifications de noms de dossier et les références à cet
  4. Ajout/suppression des barres obliques forme href
  5. De déplacer le répertoire css à la racine et à servir à partir de là
  6. Ajout/suppression des barres obliques de path.join(__dirname, '/static/')
  7. 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.

Tout le débogage des étapes que vous avez fait suppose que le navigateur ne reçoit pas le fichier css (vous êtes en supposant que quelque chose est incorrect avec le chemin d'accès). Mais en réalité l'exact contraire qui se produit - le navigateur reçoit le fichier css, mais refuser de le traiter comme css. Vous pouvez le vérifier en essayant d'ouvrir le css URL directement dans le navigateur (il doit afficher votre code source css). Ce qui se passe au lieu de cela, c'est que express.statique est desservant le fichier css en html 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