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

客官°小女子只卖身不卖艺 2023-06-10 07:27 6阅读 0赞

**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”.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyNjQz_size_16_color_FFFFFF_t_70]  
大体意思是：作为css样式表解析，但是却作为MIME类型的text/html传输的。  
果然在查看response Headers响应数据时，发现Content-Type响应对象的类型是作为text/html传输的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyNjQz_size_16_color_FFFFFF_t_70 1]  
网上搜索了一下，说出现这种问题的原因有很多，但是根据我项目的实际情况，终于发现了问题所在：在项目编写前期，为了防止中文乱码，配置了中文过滤器，过滤了所有资源（/\*），包括css样式表。  
![过滤器配置了过滤所有，MIME类型全部为text/html][MIME_text_html]

# 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）  
![浏览器从缓存中读取的][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyNjQz_size_16_color_FFFFFF_t_70 2]  
这时需要强制刷新一波，Mac版快捷键为：Command+ Shift+ R  
Win版的快捷键为：Ctrl+ F5  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyNjQz_size_16_color_FFFFFF_t_70 3]  
大功告成~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyNjQz_size_16_color_FFFFFF_t_70]: /images/20230531/959fb44f79b7464bb81fe0c7fa04c7cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyNjQz_size_16_color_FFFFFF_t_70 1]: /images/20230531/c6d8f82a790c47349649f8d76a1e2225.png
[MIME_text_html]: /images/20230531/60348e68c67147b5bb7a294aacef150c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyNjQz_size_16_color_FFFFFF_t_70 2]: /images/20230531/45def597bc6d4509a2d1c1c414ad9333.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyNjQz_size_16_color_FFFFFF_t_70 3]: /images/20230531/e3f7e4beecd545cc81062d3952732c92.png