ゲーミング物置

Expressでウェブサーバーを作ってみたらCSSが読み込めなかった

作成日2020.07.21 更新日2021.09.15 戻る

Expressでウェブサーバを作成してみたので、早速ローカルでページを確認したところCSSが反映されておらず、DevToolsでConsoleを見たら以下のエラーが出ていました。

Refused to apply style from 'http://localhost:7000/aaa/bbb/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

原因

結論として、HTMLに書いたCSSのパスの指定が間違っていました。

実際のディレクトリ構造と間違っていたパスの指定を見てみます。 


[ディレクトリ構成]

.
├── app.js
├── package.json
├── package-lock.json
├── style.css
├── aaa
│     └── index.html
│
└── node_modules


[app.js(server)]

app.get('/aaa/bbb/ccc/ddd', (req, res) => {
    res.sendFile(__dirname + '/aaa/index.html');
});


[index.html]

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../style.css">
</head>
<body>
    <span class="font-color-red">赤色に表示させたい</span>
</body>
</html>

app.jsはルーティングのところしか書いていません。 要は /aaa/bbb/ccc/ddd にアクセスしたときに /aaa/index.html を返します。

このとき、index.htmlでは "../style.css" と書いていますね。 これは実際のディレクトリ構造を見て、「style.cssのある位置はindex.htmlから見て一個上の階層やな」と思っているためです。

ですが、これが誤りなのです。 冒頭に書いたエラーメッセージを見てみましょう。 MIMEタイプについて云々と書かれていますが重要なのは「'http://localhost:7000/aaa/bbb/style.css'」です。 これは /aaa/bbb/ccc/ddd から一個上の階層にある style.css を要求しているということです。

つまり、実際のディレクトリ構造ではなく、URLを見てそこからの相対位置を要求するアドレスとしているということです。 考えてみれば全くもって当然な動作なのですが、最初このエラーに遭遇し「MIMEがどないしたん...?」と思ってました。

CSSが読み込まれる仕組み

クライアントはサーバーへhtmlを要求した後、渡されたhtmlを読み、他にもCSSや画像などのファイルが必要だとhtmlに書いてあればその資源を再度サーバーへ要求します。 そして、クライアントはサーバーのディレクトリ構造など知っているはずはありません。 当然、資源を要求する位置が相対パスで書かれているならば、リクエストURLは現在のURLと相対パスを組み合わせて決定することになるわけですね。

MIMEタイプ不一致のエラーは何だったのか

パスの指定ミスが原因だったのになぜエラーで「text/htmlはCSSじゃないから受け取れないよ！」と言われたのでしょうか。 間違ったパスで行ったリクエストのレスポンスヘッダを確認してみます。 以下がその内容です。

HTTP/1.1 404 Not Found
X-Powered-By: Express
Content-Security-Policy: default-src 'none'
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 152
Date: Tue, 21 Jul 2020 13:37:58 GMT
Connection: keep-alive

ということでこの記事はここまでになります。

戻る
© copyright 2023 ゲーミング物置