java web项目本地能正常跑,布置到Tomcat8.5以后, 浏览器控制台能拿到各种css文件 但是chrome等浏览器不能正确识别css、解析css并应用到html文件上

问题描述

开发了一个java web项目,开发环境为

  • Tomcat7
  • maven
  • mybatis
  • mysql
  • idea
    java web项目本地能正常跑,布置到Tomcat8.5以后, 浏览器控制台能监控到各种css文件确实加载过来了,但是chrome等浏览器不能正确识别css、解析css并应用到html文件上,造成了样式错乱

问题原因

对比了一下我本地正常运行的项目中css在浏览器加载情况和部署到服务器的

  • 正常运行的项目
    java web项目本地能正常跑,布置到Tomcat8.5以后, 浏览器控制台能拿到各种css文件 但是chrome等浏览器不能正确识别css、解析css并应用到html文件上_第1张图片
    我们发现正常运行的项目中 Content-Type:text/css;charset=utf-8

  • 部署到Tomcat后css不正确解析的项目
    java web项目本地能正常跑,布置到Tomcat8.5以后, 浏览器控制台能拿到各种css文件 但是chrome等浏览器不能正确识别css、解析css并应用到html文件上_第2张图片
    我们发现其Content-Type:text/html;charset=utf-8

原因

返回的文档格式不正确

问题解决

在我的项目中,有一个filter
java web项目本地能正常跑,布置到Tomcat8.5以后, 浏览器控制台能拿到各种css文件 但是chrome等浏览器不能正确识别css、解析css并应用到html文件上_第3张图片
其内部又如下代码

    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        // 处理请求乱码
        HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;
//        HttpServletRequest myRequest = new MyRequest(httpServletRequest);
         处理响应乱码
//        servletResponse.setContentType("text/json;charset=utf-8");
        servletResponse.setContentType("text/html;charset=utf-8");
        filterChain.doFilter(servletRequest,servletResponse);
    }

我这里给设置成了servletResponse.setContentType("text/html;charset=utf-8");

先把这里注释掉,问题得到解决

由于我们还需要解决乱码问题,所以我们修改代码如下所示

@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    // 处理请求乱码
    HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;
//        HttpServletRequest myRequest = new MyRequest(httpServletRequest);
     处理响应乱码
//        servletResponse.setContentType("text/json;charset=utf-8");
    String requestURI = ((HttpServletRequest) servletRequest).getRequestURI();
    if (requestURI.contains(".css")||requestURI.contains(".js")||requestURI.contains(".png")||requestURI.contains(".jpg")) {
        filterChain.doFilter(servletRequest,servletResponse);
        return;
    }else{
        servletResponse.setContentType("text/html;charset=utf-8");
        filterChain.doFilter(servletRequest,servletResponse);

    }
}

此处代码参考:https://blog.csdn.net/dmyin/article/details/107759691

你可能感兴趣的:(后端,java,前端,java,tomcat,idea)