The story when I was addicted to CSS without being applied. I'll write it down here because it's a big deal. By the way, it's a story that was caused by Java code, so I don't think it will be helpful for those who are not related.

environment

OS: Windows10 Server: Apache Tomcat 9.0.26 Java: JDK13 HTML: HTML5 CSS: CSS3

I was getting a warning in my browser

The CSS has been downloaded correctly, but it has not been applied. When I looked at the browser development tools, I got this warning.

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

Internet Explorer and Microsoft Edge give the following warning.

SEC7113: CSS was ignored because the MIME types do not match

I tried it on several browsers and it was the same, so I knew there was a problem on the server side.

Cause of the end

The cause was in the following code. As you can see from the class name and method name, it is a filter.

`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");
        //↓ This is the cause!
        response.setContentType("text/html; charset=UTF-8");
        //↑ This is the cause!
        chain.doFilter(request, response);
    }
    
    public void init(FilterConfig filtercConfig){};
    public void destroy(){}
}

I set it to pass this filter in web.xml, and it seemed that the ContentType was "text / html; charset = UTF-8" for the CSS file.

By the way, reading the web.xml and CSS files is the following code respectively.

`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">

Solution

Rewrite the cause part in EncodingFilter.java as follows. response.setCharacterEncoding("UTF-8"); This fixed it safely. I wondered if there was a problem with the server settings ...

Don't forget that it will not be reflected unless you press Ctrl + F5 in the browser. Clear and update the cache.

Digression

EncodingFilter.java was written like a book. There is such a trap ...

[Java] Resource interpreted as Stylesheet but transferred with MIME type text / html