css 未载入,因为它的 MIME 类型 "text/html" 不是 "text/css"

谷歌描述如下 :

Resource interpreted as Stylesheet but transferred with MIME type text/html： css失效

产生原因(本人遇到的原因) :

过滤器过滤路径设置为 : /*　　; 对页面所有请求进行了过滤,该过滤中将text/css文件转为了text/html类型,所以页面会提示mime类型 "text/html"不是"text/css"

解决方案 :

目前已知解决方案两种 :

1.1 过滤器设置忽略静态文件,不要对静态文件进行过滤

@WebFilter("/*")
public class EncodingFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
        //    请求和响应强转为子类类型
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) resp;
        //    设置请求编码
        request.setCharacterEncoding("UTF-8");
        //     获取请求的URI
        String URI = request.getRequestURI() ;
        //    排除静态页面
        if (URI.contains(".css") || URI.contains(".js") || URI.contains(".png")) {
            chain.doFilter(request, response);
            return ;
        }
        response.setContentType("text/html;charset=UTF-8");
        //    .放行
        chain.doFilter(request, response);
    }

}

1.2 增加一个专门处理静态文件的过滤器

@WebFilter("*.css")
public class EncodingFilter implements Filter {

　　public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        //        设置请求编码格式
        req.setCharacterEncoding("utf-8");  //post 改变(请求实体)
        //        设置响应编码格式
      　resp.setContentType("text/css;charset=utf-8");//修改响应编码
        chain.doFilter(req, resp);
    }
}

2. 使用装饰者思想对过滤器进行加强

@WebFilter("/*")

public class EncodingFilter1 implements Filter {
	@Override
	public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
		//1.强转
		HttpServletRequest request=(HttpServletRequest) req;
		HttpServletResponse response=(HttpServletResponse) resp;
		//2.放行
		chain.doFilter(new MyRequest(request), response);
	}
}

class MyRequest extends HttpServletRequestWrapper{
	private HttpServletRequest request;
	private boolean flag=true;
	
	public MyRequest(HttpServletRequest request) {
		super(request);
		this.request=request;
	}
	
	@Override
	public String getParameter(String name) {  
		if(name==null || name.trim().length()==0){
			return null;
		}
		String[] values = getParameterValues(name);
		if(values==null || values.length==0){
			return null;
		}		
		return values[0];
	}
	
	@Override
	/**
	 * hobby=[eat,drink]
	 */
	public String[] getParameterValues(String name) {
		if(name==null || name.trim().length()==0){
			return null;
		}
		Map<String, String[]> map = getParameterMap();
		if(map==null || map.size()==0){
			return null;
		}
		return map.get(name);
	}
	
	@Override
	/**
	 * 　　加强getParameterMap函数 : map{ username=[tom],password=[123],hobby=[eat,drink]}
	 */
	public Map<String,String[]> getParameterMap() {  
		
		/**
		 * 首先判断请求方式
		 * 若为post  request.setchar...(utf-8)
		 * 若为get 将map中的值遍历编码就可以了
		 */
		String method = request.getMethod();
		if("post".equalsIgnoreCase(method)){
			try {
				request.setCharacterEncoding("utf-8");
				return request.getParameterMap();
			} catch (UnsupportedEncodingException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}else if("get".equalsIgnoreCase(method)){
			Map<String,String[]> map = request.getParameterMap();
			if(flag){
				for (String key:map.keySet()) {
					String[] arr = map.get(key);
					//继续遍历数组
					for(int i=0;i<arr.length;i++){
						//编码
						try {
							arr[i]=new String(arr[i].getBytes("iso-8859-1"),"utf-8");
						} catch (UnsupportedEncodingException e) {
							e.printStackTrace();
						}
					}
				}
				flag=false;
			}
			//需要遍历map 修改value的每一个数据的编码			
			return map;
		}		
		return super.getParameterMap();
	}
	
}