web-dev-qa-db-fra.com

Node / Express - Refuse d'appliquer le style en raison de son type MIME ('text / html')

Je suis aux prises avec ce problème depuis quelques jours et n'arrive pas à aller au fond des choses. Nous faisons une application très simple de noeud/express, et essayons de servir nos fichiers statiques en utilisant quelque chose comme:

app.use(express.static(path.join(__dirname, "static")));

Cela fait ce que je m'attends à ce que pour la plupart. Nous avons quelques dossiers dans notre dossier statique pour nos CSS et javascript. Nous essayons de charger notre css dans notre vue EJS en utilisant ce chemin statique:

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

Lorsque nous atteignons notre route /, Nous obtenons tout le contenu, mais notre code CSS ne se charge pas. Nous obtenons cette erreur en particulier:

A refusé d'appliquer le style à partir de ' http: // localhost: 3000/css/style.css ' car son type MIME ('text/html') n'est pas un type MIME de feuille de style pris en charge et une vérification MIME stricte est autorisé.

Ce que j'ai essayé

  1. Effacer le cache NPM/Nouvelle installation
    • npm verify cache
    • rm -rf node_modules
    • npm install
  2. Effacer le cache du navigateur
  3. Diverses modifications de noms de dossiers et références à celles-ci
  4. Ajouter/supprimer des barres obliques à partir du href
  5. Déplacer le dossier css dans la racine et le servir à partir de là
  6. Ajouter/supprimer des slashes de path.join(__dirname, '/static/')
  7. Il y avait un commentaire à propos d'un travailleur de service qui aurait peut-être foiré dans un rapport sur un problème de github, et qui semblait résoudre les problèmes de nombreuses personnes. Il n'y a pas de technicien de service pour notre hôte local: https://github.com/facebook/create-react-app/issues/658
    • Nous n'utilisons pas de réaction, mais je saisis toutes les recherches sur Google que 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 package.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 n'utilisons actuellement aucun fichier de mise en page pour notre système EJS.

Je suis heureux de fournir des détails supplémentaires si nécessaire.

node.jsexpressmime-typesstatic-files
12
Matthew

Le problème est le résultat d'un fichier mal nommé. Notre élève avait un espace à la fin du style.css fichier. Il y avait quelques astuces à cela, le premier était un manque de mise en évidence de la syntaxe dans l'éditeur de texte, et le second était l'éditeur de texte détectant le type de fichier pour d'autres fichiers CSS nouvellement créés, mais pas le fichier avec un nom incorrect. Supprimer cet espace a résolu le problème.

Merci slebetman pour votre aide en me dirigeant dans la bonne direction.

5
Matthew

Dans l'application NOdejs avec Express, nous devons ajouter la ligne suivante pour informer le serveur du répertoire.

app.use(express.static(__dirname));

Cela résoudra le problème du rendu non css

1
Surekha K

Ce n'est pas une solution à votre question, mais cela pourrait aider quelqu'un d'autre à la recherche d'une solution comme moi. si vous utilisez app.get comme ci-dessous:

app.get(express.static(path.join(__dirname,"public")));

changez le en:

app.use(express.static(path.join(__dirname,"public")));
0
Ajay