android webview Not allowed to load local resource错误的解决

之前写过几篇博客是关于webview的简单使用以及怎么和js交互。

转自：https://blog.youkuaiyun.com/yuzhiqiang_1993/article/details/76228541
对webview的使用和跟网页交互还不太了解的同学可以先看看。
webview的简单使用
Android跟网页的交互
给webview添加进度条

---

本片博客的demo是基于下面这篇博客的一个demo编写的

android加载网页调相机拍照并显示

---

在之前的android加载网页调相机拍照并显示的博客中，我是加载了本地的网页，然后调拍照显示图片到网页上，这是没问题的。
但是，当我把网页放到服务器上，这个时候webview加载的是服务器上的网页了，在调相机拍照拿手机上的图片就会报Not allowed to load local resource 错误

网页还是以前的网页，什么都没改，这是放到了服务器而已，加载的是服务端的网页

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

我们来看看运行效果：

可以看到，图片并没有显示到网页上，打开控制台可以看到，我们已经调用了显示图片的方法，但是报了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);

    }
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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);
            }
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

然后再来看看运行效果：

可以看到，我们已经顺利的拿到数据了。

---

希望能帮到你，下面是demo。可以把页面改成自己服务器上面的页面

demo