javaWeb启动项目css样式丢失,css 未载入，因为它的 MIME 类型 “text/html“ 不是 “text/css“

BUG出现情景描述

• 某天,JavaWeb项目正常运行，然后手动清除了一下谷歌浏览器的数据缓存
  
• 然后页面的css样式就丢失了，换个浏览器也是如此，谷歌浏览器的控制台窗口也没有报错，仅仅给了一个无关的警告信息，这个警告最终证明与bug无关，但有效误导了我排查问题
  
• 然后我换成火狐浏览器重新编译部署项目启动，火狐浏览器提示了以下错误
  

BUG的分析

• 项目中写了了xml配置文件格式的过滤器类，对项目路径下的所有资源的编码格式进行了设置，所以导致浏览器请求项目资源的时候，经过过滤器的时，编码格式被统一进行了修改,响应资源的contentType被统一修改成了"text/html;charset=UTF-8"格式，因此，css资源文件的类型本应该为“text/css”，却在经过过滤器时被修改成了text/html,因此无法解析加载，导致样式出错
• 思考一个问题，为什么在清除浏览器缓存之前启动项目都是正常的，推测如下：在写设置编码的过滤器之前，css资源已经加载到浏览器中，能够正常显示。在写过滤器之后，浏览器一直都是用的缓存中的静态资源文件，因此不会出现样式失效的问题，而当清空浏览器缓存之后，再次请求项目资源，则会经过过滤器，也就产生了以上描述的问题
• web.xml配置如下：

    <filter>
        <filter-name>EncodingFilterfilter-name>
        <filter-class>filter.EncodingFilterfilter-class>
    filter>
    <filter-mapping>
        <filter-name>EncodingFilterfilter-name>
        <url-pattern>/*url-pattern>
    filter-mapping> 

• 过滤器代码如下：

import javax.servlet.*;
import java.io.IOException;

public class EncodingFilter implements Filter {
    public void init(FilterConfig config) throws ServletException {
    }

    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        chain.doFilter(request, response);
    }
}

BUG的解决

• 分析到这里，解决方案有很多，最简单的就是不在过滤器中的设置响应编码格式，只在需要设置响应编码格式的类中进行设置即可

import javax.servlet.*;
import java.io.IOException;

public class EncodingFilter implements Filter {
    public void init(FilterConfig config) throws ServletException {
    }

    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
//			不在过滤器中设置响应编码格式，防止浏览器请求非text/html资源时出现问题
//        response.setContentType("text/html;charset=UTF-8");
        chain.doFilter(request, response);
    }
}