web-dev-qa-db-ja.com

Node / Express-MIMEタイプ（ 'text / html'）のためにスタイルの適用を拒否しました

私は過去数日間この問題を抱えてきましたが、この問題の根底にあるとは思えません。非常に基本的なノード/エクスプレスアプリを実行し、次のようなものを使用して静的ファイルを提供しようとしています。

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

これは私が期待することの大部分を果たします。 cssとjavascriptの静的フォルダーにいくつかのフォルダーがあります。次の静的パスを使用して、CSSをEJSビューにロードしようとしています。

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

ルート_/_をヒットすると、すべてのコンテンツを取得していますが、CSSが読み込まれていません。特にこのエラーが発生しています：

「 http：// localhost：3000/css/style.css 」からスタイルを適用することを拒否有効になっています。

私が試したもの：

  1. NPMキャッシュのクリア/新規インストール
    • _npm verify cache_
    • _rm -rf node_modules_
    • _npm install_
  2. ブラウザキャッシュをクリア
  3. フォルダー名のさまざまな変更とその参照
  4. Hrefを形成するスラッシュの追加/削除
  5. Cssフォルダーをルートに移動し、そこから提供します
  6. path.join(__dirname, '/static/')からのスラッシュの追加/削除
  7. Githubの問題レポートでサービスワーカーが混乱を招く可能性があるというコメントがあり、多くの人々の問題を修正しているようです。ローカルホストにはサービスワーカーがいません： https://github.com/facebook/create-react-app/issues/658
    • 私たちは反応を使用していませんが、私が見つけることができるGoogle検索を把握しています

ルート：

_app.get("/", function(req, res) {
    res.render("search");
});
_

景色：

_<!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>
_

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"
  }
}
_

プロジェクト構造：

_-app
--node_modules
--static
---img
---css
---js
--views
---movie.ejs
---results.ejs
---search.ejs
--index.js
--package-lock.json
--package.json
_

注：現在、JSにレイアウトファイルを使用していません。

必要に応じて追加の詳細情報を提供させていただきます。

node.jsexpressmime-typesstatic-files
12
Matthew

問題は、不適切な名前のファイルの結果です。私たちの学生はstyle.cssファイルの終わりにスペースがありました。これにはいくつかのヒントがあります。1つ目はテキストエディターの構文の強調表示の欠如で、2つ目はテキストエディターが他の新しく作成されたcssファイルのファイルタイプを検出しました。スペースを削除することで問題は解決しました。

Slebetman、私を正しい方向に向ける手助けをしてくれてありがとう。

5
Matthew

Expressを使用したNOdejsアプリでは、次のような行を追加して、ディレクトリについてサーバーに通知する必要があります。

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

これにより、CSSがレンダリングされないという問題が解決します

1
Surekha K

これはあなたの質問に対する解決策ではありませんが、これは私のような解決策を探している他の誰かを助けるかもしれません。以下のようにapp.getを使用する場合：

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

次のように変更します。

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