CSSが適用されなくてずっとハマっていた時の話。せっかくなのでここに書き留めておく。
ちなみに、Javaのコードに原因があった話なので関係ない方は参考にならないと思います。
環境
OS: Windows10
サーバー: Apache Tomcat 9.0.26
Java: JDK13
HTML: HTML5
CSS: CSS3
ブラウザで警告が出ていた
CSSは正しくダウンロードされているのに、適用されていない。ブラウザの開発ツールを見ると、この警告が出ていた。
Resource interpreted as Stylesheet but transferred with MIME type text/html
＊Internet ExplorerやMicrosoft Edgeだと次のような警告になる。
SEC7113: CSS は、MIME の種類が一致しないため、無視されました
いくつかのブラウザで試しても同じだったので、サーバー側に問題があることは察しがついた。
行きついた原因
原因は、次のコードにあった。クラス名やメソッド名から分かる通り、フィルターである。
importjava.io.IOException;importjavax.servlet.Filter;importjavax.servlet.FilterChain;importjavax.servlet.FilterConfig;importjavax.servlet.ServletException;importjavax.servlet.ServletRequest;importjavax.servlet.ServletResponse;publicclassEncodingFilterimplementsFilter{publicvoiddoFilter(ServletRequestrequest,ServletResponseresponse,FilterChainchain)throwsIOException,ServletException{request.setCharacterEncoding("UTF-8");//↓ここが原因箇所！response.setContentType("text/html; charset=UTF-8");//↑ここが原因箇所！chain.doFilter(request,response);}publicvoidinit(FilterConfigfiltercConfig){};publicvoiddestroy(){}}web.xmlでこのフィルターを通るように設定していて、CSSファイルに関して、どうもこれでContentTypeが「text/html; charset=UTF-8」になってしまっていたようだった。
ちなみに、web.xmlとCSSファイルの読み取りはそれぞれ以下のようなコード。
<?xml version="1.0" encoding="UTF-8"?><web-appversion="4.0"xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"><filter><filter-name>EncodingFilter</filter-name><filter-class>tool.EncodingFilter</filter-class></filter><filter-mapping><filter-name>EncodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping></web-app><linkhref="background.css"rel="stylesheet"type="text/css">解決方法
EncodingFilter.javaで原因箇所の部分を次のように書き換える。response.setCharacterEncoding("UTF-8");
これで無事直った。サーバーの設定に問題があるかと思ったよ…。
余談
EncodingFilter.javaは本に倣って書いていたものでした。こんな罠があるとは…。
