CSS样式无法加载

CSS样式无法加载

# 具体遇到的问题
引入中文乱码的过滤器EncodeFilter后,为什么CSS样式无法加载了

http://img1.sycdn.imooc.com//climg/5fb670f10960abb410360729.jpg

http://img1.sycdn.imooc.com//climg/5fb66fd909d7176a03870312.jpg

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

过滤器

public class EncodeFilter implements Filter {

private String encoding;

@Override

public void destroy() {

// TODO Auto-generated method stub


}


@Override

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)

throws IOException, ServletException {

// TODO Auto-generated method stub

HttpServletRequest req = (HttpServletRequest)request;

req.setCharacterEncoding(encoding);

HttpServletResponse res= (HttpServletResponse)response;

res.setContentType("text/html;charset=" + encoding);

System.out.println("中文乱码过滤器已生效");

chain.doFilter(request, response);

}


@Override

public void init(FilterConfig filterConfig) throws ServletException {

// TODO Auto-generated method stub

encoding=filterConfig.getInitParameter("encoding");

//System.out.println(encoding);

}


}


web.xml配置文件

<filter>

  <filter-name>EncodeFilter</filter-name>

  <filter-class>com.imooc.book.filter.EncodeFilter</filter-class>

  <init-param>

  <param-name>encoding</param-name>

  <param-value>UTF-8</param-value>

  </init-param>

  </filter>

<filter-mapping>

  <filter-name>EncodeFilter</filter-name>

  <url-pattern>/*</url-pattern>

  </filter-mapping>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

4回答
好帮手慕阿慧 2020-11-22 17:48:24

同学你好,中文乱码的过滤器EncodeFilter中应该调用setCharacterEncoding()方法设置编码。建议同学去掉res.setContentType("text/html;charset=" + encoding); 

参考代码如下:

http://img1.sycdn.imooc.com//climg/5fba33b1098909f407640212.jpg

修改后,再重启Tomcat,访问试试。

慕虎4211385 提问者 2020-11-21 17:29:28

老师,尝试你的方法多次,没有任何改变,还是不能正常显示

http://img1.sycdn.imooc.com//climg/5fb8dd9f09d7d06d11110619.jpg

http://img1.sycdn.imooc.com//climg/5fb8ddcd099c35b006670983.jpg

http://img1.sycdn.imooc.com//climg/5fb8dde609ec51a409090918.jpg

好帮手慕小脸 2020-11-21 15:21:20

同学你好,

1、复制运行同学给出的代码没有出现这种情况,建议同学更换浏览器试试

2、因为过滤器会将所有的css,js等资源请求全部转为了text/html,导致失效。所以这里才建议对请求进行分类,为一些css等一类文件就以原来的方式请求进行,不做处理

好帮手慕小脸 2020-11-20 10:49:18

同学你好,

1、上述代码并没有问题哟,建议同学查看AuthFilter过滤器,查看是否有拦截css等文件。如果有拦截,则建议同学将其放行。如下所示(需结合自身代码进行修改):

http://img1.sycdn.imooc.com//climg/5fb7279509e02a6c10470231.jpg

HttpServletRequest req =(HttpServletRequest) request;
String url=req.getRequestURI();
if(url.indexOf(".css")>0||url.indexOf(".jpg")>0||url.indexOf(".png")>0) {
    chain.doFilter(request, response);
    return;
}

2. 建议同学清除缓存浏览器与Tomcat缓存,然后重新进行测试。如下所示:

浏览器:Ctrl+R 、Ctrl+F5(强制刷新)

Tomcat:

http://img1.sycdn.imooc.com//climg/5f72fdf609514a3d03410198.jpg

  • 提问者 慕虎4211385 #1
    两个疑问: 1. 出现上述问题时,我还没有添加AuthFilter过滤器,所以不存在老师答复第一点的情况,另外我也尝试了清除缓存浏览器与Tomcat缓存,但是没有任何效果。 2. 我还没写AuthFilter过滤器,但是对于答复中有个疑问,过滤的URL,为什么会过滤掉css,jpg,png等文件,这和URL有什么关联?
    2020-11-21 10:18:05
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师