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
大功告成~