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

本文讲述了在JavaWeb项目中,通过清除浏览器缓存导致CSS样式丢失的故障现象,分析了过滤器配置错误影响资源类型解析的原因,并给出了修改过滤器以避免此类问题的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JavaWeb项目过滤器的坑

BUG出现情景描述

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

BUG的分析

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值