Html请求CSS显示:Resource interpreted as Stylesheet but transferred with MIME type text/html

6 篇文章 0 订阅

情况如下:

在这里插入图片描述
Tomcat服务器上CSS的Content-Type格式设置错了,导致CSS样式出不来,借助了以为博主的博客,搞了两天,最终是弄好了。博客

原因:

Web 服务器在响应请求时,除了返回所请求的资源本身,一般还会在响应的头部带上 Content-Type 字段,其值应当与该资源的 MIME 类型相匹配。如果 Content-Type 没有与资源一同返回或配置不正确的话,就有可能在一些浏览器上造成兼容性问题。如网页中的样式文件 CSS 对应的 Content-Type 应该为 text/css,如果未返回正确的 Content-Type,则有可能造成浏览器拒绝渲染样式。
但是我工程中加了过滤器,统一了返回的类型为text/html,只需要把对应的CSS的请求改了就行了。
在这里插入图片描述

解决方法:

在过滤器中加入以下代码,将包含css等的请求的ContentType设置成"text/css;charset=utf-8"。

		request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        if (requestURI.contains("/css/") ||
                requestURI.contains("/js/") ||
                requestURI.contains("/fonts/") ||
                requestURI.contains("/img/") ||
                requestURI.contains("/images/") ||
                requestURI.contains("/error/")) {
                response.setContentType("text/css;charset=utf-8");
                filterChain.doFilter(request, response);
            return;
        }

        response.setContentType("text/html;charset=utf-8");

弄了2天,完成:在这里插入图片描述
在这里插入图片描述

这里是总结:

借助了博客
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值