android webview Not allowed to load local resource錯誤的解決辦法__web

之前寫過幾篇部落格是關於webview的簡單使用以及怎麼和js互動。
對webview的使用和跟網頁互動還不太瞭解的同學可以先看看。
webview的簡單使用
Android跟網頁的互動
給webview添加進度條

本片部落格的demo是基於下面這篇部落格的一個demo編寫的

android載入網頁調相機拍照並顯示

在之前的android載入網頁調相機拍照並顯示的部落格中，我是載入了本地的網頁，然後調拍照顯示圖片到網頁上，這是沒問題的。
但是，當我把網頁放到伺服器上，這個時候webview載入的是伺服器上的網頁了，在調相機拍照拿手機上的圖片就會報Not allowed to load local resource 錯誤

網頁還是以前的網頁，什麼都沒改，這是放到了伺服器而已，載入的是服務端的網頁

   webView.loadUrl("http://yuzhiqiang.name/testWebView/index.html");

我們來看看運行效果：

可以看到，圖片並沒有顯示到網頁上，開啟控制台可以看到，我們已經調用了顯示圖片的方法，但是報了Not allowed to load local resource這個錯誤。

原因

為什麼載入本地網頁就可以，而載入伺服器上面的頁面就不行呢。

這是因為我們在載入本地網頁是使用的是file:/// 去拿本地的資料，這個時候因為本地網頁也是通過file:///去載入的，所以是可以拿到資料的，但是，當我們使用http協議去載入網頁時，再通過file:///拿圖片由於安全原因是不被允許的。所以就會報類似下面的錯誤：
Not allowed to load local resource: file:///xxxxxx”

解決辦法

解決辦法就是類比http請求，然後通過重寫shouldInterceptRequest方法攔截請求，重新構造WebResourceResponse，通過流的方式將資料傳遞給前端，返回自己構造的WebResourceResponse即可。

下面看看具體的代碼實現，我這邊需要傳遞的是圖片：
首先要跟前端頁面約定一個欄位，用來表示我要傳遞的圖片。

首先先修改最上層顯示圖片代碼，主要就是將displayImg()方法中的file:/// 修改為 約定好的key

下面是要載入的網頁代碼

    var imgDom;    $(function() {        /*點擊事件*/        $("img").on("click", function() {            console.log("點擊調android拍照");            imgDom = this; //將當前點擊的img標籤賦給變數imgDom            console.log("當前節點:" + imgDom);            window.android.takePhoto();        });    });    /*顯示圖片*/    function displayImg(path) {        console.log("顯示圖片");        /*約定的key*/        var androidImgKey="http://androidimg"        $(imgDom).attr("src", androidImgKey + path);    }

android端代碼：
主要是重寫shouldInterceptRequest方法

            @Override            public WebResourceResponse shouldInterceptRequest(WebView webView, WebResourceRequest webResourceRequest) {                FileInputStream input;                String url = webResourceRequest.getUrl().toString();                String key = "http://androidimg";                /*如果請求包含約定的欄位 說明是要拿本地的圖片*/                if (url.contains(key)) {                    String imgPath = url.replace(key, "");                    L.i("本地圖片路徑：" + imgPath.trim());                    try {                        /*重新構造WebResourceResponse  將資料已流的方式傳入*/                        input = new FileInputStream(new File(imgPath.trim()));                        WebResourceResponse response = new WebResourceResponse("image/jpg", "UTF-8", input);                        /*返回WebResourceResponse*/                        return response;                    } catch (FileNotFoundException e) {                        e.printStackTrace();                    }                }                return super.shouldInterceptRequest(webView, webResourceRequest);            }

然後再來看看運行效果：

可以看到，我們已經順利的拿到資料了。

希望能幫到你，下面是demo。可以把頁面改成自己伺服器上面的頁面

demo