JSPでcssが適用されない（Resouce interpreted as Stylesheet but transferred with MIME type）事象のトラブルシューティング記録

投稿日：2021年4月19日更新日：2021年3月6日

＜目次＞

(１) JSPでcssが適用されない（Resouce interpreted as Stylesheet but transferred with MIME type）事象のトラブルシューティング記録
　 (１-１) 発生状況・エラーメッセージ
　 (１-２) 原因
　 (１-３) 対処
　 (１-４) エラーからの学び

(１) JSPでcssが適用されない（Resouce interpreted as Stylesheet but transferred with MIME type）事象のトラブルシューティング記録

(１-１) 発生状況・エラーメッセージ

JSPに正しくcssを読み込んでいるにも関わらず、cssが正しく適用されない事象でした。

（エラーメッセージ）

Resource interpreted as Stylesheet but transferred with MIME type text/html: “[cssのパス]".

実際に開発者ツール（F12）等でネットワークトラフィックを見ても、cssの読み込み自体は正常に出来ていました。

（図１１１）cssは読み込めている

しかし、エラーメッセージにも書かれている通り、MIMEタイプが指定されているとメッセージが出ており、実際にレスポンスヘッダーには「Content-Type: text/html;～」となっており、想定していた「text/css;」にはなっていませんでした。

●レスポンスヘッダーの「Content-Type」

Content-Type: text/html;charset=UTF-8

（図１１２）

＞目次にもどる

(１-２) 原因

原因はフィルタークラスのプログラムで意図せず「ContentType」の設定をしていた事が原因でした。

response.setContentType("text/html; charset=UTF-8");

フィルタークラスはデフォルトではHTTPリクエストの前後で実行されるため、cssを読み込むリクエストに対しても意図せず「ContentType」がセットされてしまっていました事が原因でした。

＞目次にもどる

(１-３) 対処

前述の通り、フィルタークラスにて「ContentType」をセットしていたのが原因のため、そこをコメントアウトする事で正常に動作しました。

（修正後）setContentTypeをコメントアウト

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
	request.setCharacterEncoding("UTF-8");
	//# ↓コメントアウト
	//response.setContentType("text/html; charset=UTF-8");
	chain.doFilter(request, response);
}

（図１３１）

上記の修正を適用した結果、cssが正しくJSP画面に適用されるようになりました。