001_css 未載入,因為它的 MIME 類型 "text/html" 不是 "text/css"

問題描述 : 

火狐描述如下 : 

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();
	}
	
}