【Java】Resource interpreted as Stylesheet but transferred with MIME type text/html

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 の種類が一致しないため、無視されました

いくつかのブラウザで試しても同じだったので、サーバー側に問題があることは察しがついた。

行きついた原因

　原因は、次のコードにあった。クラス名やメソッド名から分かる通り、フィルターである。

EncodingFilter.java

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;

public class EncodingFilter implements Filter{
    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);
    }

    public void init(FilterConfig filtercConfig){};
    public void destroy(){}
}

web.xmlでこのフィルターを通るように設定していて、CSSファイルに関して、どうもこれでContentTypeが「text/html; charset=UTF-8」になってしまっていたようだった。

ちなみに、web.xmlとCSSファイルの読み取りはそれぞれ以下のようなコード。

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="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>

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

解決方法

　EncodingFilter.javaで原因箇所の部分を次のように書き換える。
response.setCharacterEncoding("UTF-8");
これで無事直った。サーバーの設定に問題があるかと思ったよ…。

＊ブラウザでCtrl+F5を行わないと反映されないのでお忘れなく。キャッシュを消去して更新。

余談

　EncodingFilter.javaは本に倣って書いていたものでした。こんな罠があるとは…。