Tomcat运行servlet项目，静态资源css无法显示

问题复现：

先简述一下问题：

一个servlet项目，使用了Filter过滤器后，css等静态资源无法使用，但是在浏览器中可以看到状态码是200，说明请求成功，后台log显示路径文件放行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tLzwznrN-1680185539388)(.\img\1680147116720.png)]

后台打印的信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kIlNVPht-1680185539389)(.\img\1680147148673.png)]

在之前的servlet -demo项目中，登录页面是webapp下的h5，css也在webapp下，样式可以正常加载，随后在项目中使用了，Servlet中的Filter过滤器，web.xml中设置过滤路径为 /* ，让所有请求都经过过滤器， 在过滤器中的逻辑为判断URI是否为匹配的URI，是则放行，不是则执行else if的内容，与登录相关的资源直接放行。

xml过滤规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P2FUV9qh-1680185539389)(.\img\1680146773729.png)]

过滤器逻辑

//页面获取的session
        HttpSession session = req.getSession (false);
        String uri = req.getRequestURI ();
        if ("/login.html".equals (uri) || "/css/login.css".equals (uri) || "/loginServlet".equals (uri) || "/favicon.ico".equals (uri) || "/css/index.css".equals (uri)) {
            filterChain.doFilter (req, resp);
            System.out.println ("放行uri参数：" + uri);
        } else if (session == null) {
            System.out.println ("没有有效cookie，未放行uri参数：" + uri);
            resp.sendRedirect (req.getContextPath () + "/login.html");
        } else {
            filterChain.doFilter (req, resp);
            System.out.println ("其他放行uri参数：" + uri + "==>" + session.getId ());
        }

通过断点的验证也可以发现 ，代码逻辑是没有问题的。

解决思路

逻辑没有问题，大概率原因不在这儿，通过控制台的信息，发现css文件是请求到了，但是返回类型是是text/html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q85E400J-1680185539390)(.\img\1680147711633.png)]

通过这个信息可以知道，是过滤器后置增强的时候把所有返回类型设置成了text/html，接着往下看。

解决方案

虽然发现是这里设置到返回类型影响了所有的资源返回类型，但是解决方案不止删除。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ouaiT92b-1680185539390)(.\img\1680148388705.png)]

第一种方案

• 当然是删除了，如果返回资源中存在多种类型的静态资源，而html资源没有太多要求时可以直接删掉。在我的项目中，因为只有两个css被转成html了，为了稳妥起见，我并不选择这种方法。

第二种方案

• 虽然返回类型是html，但是可以让它不通过servlet响应体返回，这样它就不会转码了。那就是在tomcat中添加静态资源的路径。

• 步骤如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-njrTpe23-1680185539391)(.\img\1680148833916.png)]

• 选择deployment

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wEAuYYXu-1680185539391)(.\img\1680148862982.png)]

• 选择加号，选择external Source

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GeJuBqfs-1680185539391)(.\img\1680148940682.png)]

• 选择css文件夹所在位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HirNidZx-1680185539392)(.\img\1680148999348.png)]

最后应用，重启tomcat服务器

问题解决：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tthrz5Hv-1680185539392)(.\img\1680149145647.png)]

5539392)]

最后应用，重启tomcat服务器

问题解决：

[外链图片转存中…(img-Tthrz5Hv-1680185539392)]

在解决过程中也看了别人的贴子和解决方案，还有另外一种解决方案是用@{ }包裹css路径，测试后发现不行，只能用于thymeleaf。