Resource interpreted as Stylesheet but transferred with MIME type text/html: Chrome谷歌浏览器css样式失效

Resource interpreted as Stylesheet but transferred with MIME type text/html: Chrome谷歌浏览器css样式失效，以及provisional headers are shown浏览器临时的请求头

1、运行环境

• 笔记本：MacBook pro，系统是 MacOS High Sierra，版本10.13.6。
• 集成开发环境：IDEA 2018.2.8 Tomcat 8.5.46
• 数据库：MySQL ( mysql-5.7.28-macos10.14-x86_64 ) + Navicat Premium12.0.24-TNT edition
• 浏览器：Google Chrome 版本 77.0.3865.120（正式版本） （64 位）

2、问题解析

在页面显示时，无法正常显示css表样式。浏览器中出现一个警告：Resource interpreted as Stylesheet but transferred with MIME type text/html: “http://localhost:8080/web18/css/bootstrap.min.css”.

大体意思是：作为css样式表解析，但是却作为MIME类型的text/html传输的。
果然在查看response Headers响应数据时，发现Content-Type响应对象的类型是作为text/html传输的。

网上搜索了一下，说出现这种问题的原因有很多，但是根据我项目的实际情况，终于发现了问题所在：在项目编写前期，为了防止中文乱码，配置了中文过滤器，过滤了所有资源（/*），包括css样式表。

3、解决方案

既然是因为过滤器把css表过滤了，那就需要对文件进行判断，若包含css样式表就放行不进行过滤即可。

public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) resp;
        //获取资源名
        String url=request.getRequestURI();
      //如果资源名包含css样式表、js样式表或者png图片就放行
      if(url.contains(".css")||url.contains(".js")||url.contains(".png")) {
            chain.doFilter(request, response);
            return;
        }
        req.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        

        // 放行
        chain.doFilter(request, response);
    }

4、浏览器缓存问题

再刷新浏览器，发现并没有成功显示样式，原因是浏览器走的是磁盘缓存（from disk cache）或者内存缓存（from memory cache）

这时需要强制刷新一波，Mac版快捷键为：Command+ Shift+ R
Win版的快捷键为：Ctrl+ F5

大功告成~