問題描述 :

火狐描述如下 :

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. 過濾器設定忽略靜態檔案,不要對靜態檔案進行過濾

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

}
 

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