Android webview Not allowed to load local resource异常的解决办法

之前写过几篇博客是关于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


如果你觉得本文对你有帮助,麻烦动动手指顶一下,算是对本文的一个认可,如果文中有什么错误的地方,还望指正,转载请注明转自喻志强的博客 ,谢谢!

©️2020 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值