有模有样解决Flutter里Webview无法访问HTTP页面的问题
探索过程
返利 https://www.cpa5.cn/
Android9(好像是吧)开始谷歌就默认不让开发者访问不安全HTTP内容了,如果非要用HTTP,那必须在networkSecurityConfig
里配置cleartextTrafficPermitted
才行。谷歌这个设计的出发点本是好的,HTTPS固然更安全咱都懂,但有时候这个后端接口你选择不了要HTTP还是HTTPS,比如要使用没有提供HTTPS的第三方服务,或者是本文的这种情况:在内嵌的webview里访问没有HTTPS的网页~
正常的Android应用,内嵌个webview,配置一下cleartextTrafficPermitted
就可以正常访问HTTP内容了,但是flutter官方的webview组件有点坑,你在flutter项目内的Android工程配置好cleartextTrafficPermitted
之后他不管用……
每次遇到HTTP的网页,就会报这个错,很烦
然后这个问题我查了很久也没啥好的解决方案,看到有人给flutter官方提了issues,但是还没解决,那只能自己来强行解决了……
我的思路是:遇到HTTP地址,直接转成HTTPS来访问,不过这只能解决那些同时有HTTP和HTTPS的网站,遇到只有HTTP的网站就没辙啦~
强行的实现过程
实现的代码很简单,首先利用Webview的onWebViewCreated
事件获取WebViewController
实例,然后在onPageFinished
页面加载完成事件里判断当前页面地址是否http开头,如果是的话就替换成HTTPS并且重新加载即可~
因为http的页面加载在iOS上是白屏,Android上是错误信息,所以为了提高用户体验,我们可以在onPageStarted
事件里加入一个加载中的提示框。
做完的效果如下:
涉及的代码如下:
WebView(initialUrl: _url,allowsInlineMediaPlayback: true,javascriptMode: JavascriptMode.unrestricted,onWebViewCreated: (controller) => _webViewController = controller,onProgress: (value) => print('page progress: $value'),onPageStarted: (url) {print('onPageStarted: $url');if (url.contains('http://')) {_httpFlag = true;showLoading(context);}},onPageFinished: (value) {print('onPageFinished: $value');if (value.contains('http://')) {setState(() {_url = value.replaceAll('http://', 'https://');});_webViewController.loadUrl(_url);}if (value.contains('https://') && _httpFlag) {_httpFlag = false;Navigator.of(context).pop();}},
),
比较蠢的解决方法,通过效果图可以看到,对用户体验的提升其实很有限,其实根本是治标不治本的,真要解决这问题还得靠官方~
真正的解决
其实前面说了这么多,真正的解决方案还是靠的flutter官方填坑,好消息是,在最新的flutter2版本中,flutter官方已经成功填坑,现在我们只需要在AndroidManifest.xml
里配置好usesCleartextTraffic
和network_security_config
即可!
具体操作就是在flutter项目下创建/android/app/src/main/res/xml/network_security_config.xml
文件,填上配置内容:
<?xml version="1.0" encoding="utf-8"?>
<network-security-config><base-config cleartextTrafficPermitted="true"><trust-anchors><certificates src="system" /><certificates src="user" /></trust-anchors></base-config>
</network-security-config>
然后修改/android/app/src/main/AndroidManifest.xml
文件,在application
节点加入以下两个属性即可:
android:usesCleartextTraffic="true"
android:networkSecurityConfig="@xml/network_security_config"
完成之后你的项目结构应该是类似这样的
之后在控制台执行flutter clean
,重新run,就可以看到App里的webview能正常打开HTTP网站了,妙啊~
参考资料
- How to fix 'net::ERR_CLEARTEXT_NOT_PERMITTED' in flutter:https://stackoverflow.com/questions/55592392/how-to-fix-neterr-cleartext-not-permitted-in-flutter
- 在 Flutter 中使用 WebView:https://zhuanlan.zhihu.com/p/77083307
欢迎交流
程序设计实验室专注于互联网热门新技术探索与团队敏捷开发实践,在公众号「程序设计实验室」后台回复 linux、flutter、c#、netcore、android、kotlin、java、python 等可获取相关技术文章和资料,同时有任何问题都可以在公众号后台留言~
- 博客园:https://www.cnblogs.com/deali/
- 打代码直播间:https://live.bilibili.com/11883038
- 知乎:https://www.zhihu.com/people/dealiaxy
有模有样解决Flutter里Webview无法访问HTTP页面的问题相关推荐
- android webview兼容华为,三星、华为等android里webview不支持input file的解决方法
三星.华为等android里webview不支持input file的解决方法 分类:软件问题| 发布:佚名| 查看: | 发表时间:2014/5/16 由于安全因素android webview屏蔽 ...
- Flutter 里的语法糖解析,知其所然方能潇洒舞剑
本篇主要针对 Flutter 里 Dart 的一些语法糖实现进行解析,让你明显简单声明的关键字背后,Dart 究竟做了什么? 如下图所示,起因是昨天在群里看到一个很基础的问题,问: "这段代 ...
- Flutter 里的语法糖解析,知其所然方能潇洒舞剑 | 开发者说·DTalk
本文原作者: 恋猫de小郭,原文发布于: GSYTech 本篇主要针对 Flutter 里 Dart 的一些语法糖实现进行解析,让您明白简单声明的关键字背后,Dart 究竟做了什么? 如下图所示,起因 ...
- 一种解决 MacBook 里的 App Store 无法登录的问题
一种解决 MacBook 里的 App Store 无法登录的问题 参考文章: (1)一种解决 MacBook 里的 App Store 无法登录的问题 (2)https://www.cnblogs. ...
- 解决VirtualBox里Ubuntu的共享文件夹无法访问(终极解决方案)
解决VirtualBox里Ubuntu的共享文件夹无法访问(终极解决方案) the folder contents could not be displayed 终端输入: sudo usermod ...
- table中加表单元素怎么验证_使用element-ui +Vue 解决 table 里包含表单验证的问题...
应用场景: 在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示: 这个校验中,最关键的问题在于如何给el-form-item ...
- 解决EMF里引用对象的刷新问题
假设在ecore模型里定义了两个类:产品(Product)和制造商(Manufacturer),Product通过名为manufacturer的多对一引用与Manufacturer建立关系.在应用程序 ...
- element-ui 解决 table 里包含表单验证的问题!
element-ui 解决 table 里包含表单验证的问题! 参考文章: (1)element-ui 解决 table 里包含表单验证的问题! (2)https://www.cnblogs.com/ ...
- 解决ios的webview中上/下拉露出黑灰色背景问题
解决ios的webview中上/下拉露出黑灰色背景问题 问题描述:手机H5页面在ios的webview中,下拉(或上拉)会露出黑灰色背景 ,感觉很不好看,现在想要去掉这个背景 解决方法: 1.touc ...
最新文章
- 判别式和产生式的区别
- 功能测试包含哪些测试_一小时复习,期末考试必过 重邮软件测试题总结
- 参加 JSConf China 2019 是怎样的体验?VS Code 和 TypeScript 都很火
- 一件登录facebook_我从Facebook的R教学中学到的6件事
- 前端学习(1841):前端面试题之react和vue区别
- Android P 适配指南
- HTML5 CSS3编程入门经典 ((美)Rob Larsen) pdf扫描版
- 拓端tecdat|Python Monte Carlo K-Means聚类实战研究
- java实例化对象的四种方式
- 如何在HTML网页引入思源黑体
- js通过资源链接下载文件
- MAC中生成SSH key
- 如何使用poi在word表格中新增行的4种方法
- Matlab+cpp矩量法代码演示
- 68 个 Python 内置函数详解
- 公众号欢迎各位大佬投稿
- 【JS】JSON.stringify( )
- 数字逻辑综合工具实践-DC-08——静态时序分析(STA)
- 深度解析Istio系列之策略与遥测篇
- 5 Fast unfolding of communities in large networks
热门文章
- cas1314-15-4|无水氧化铂|氧化铂(IV)|亚当斯催化剂|无水氧化铂|氧化铂
- happypack 原理解析
- PHP switch case语句用法
- 贴片铝电容识别及型号_贴片电容的种类识别
- python代码怎么练_Python程序设计训练
- 万卷书 - 向阳而生 [The Optimistic Child]
- 14家企业巅峰之战!2021中国移动智慧家庭创客马拉松大赛决赛即将开启
- JAVA中常见的运行异常(RuntimeException)
- js两种移除事件的方法
- JavaScript解除事件绑定处理程序 js事件绑定解除