flutter webview加载本地文件出现跨域解决方案
肥肥呀呀呀 2024-09-09 16:03:02 阅读 78
一直报错
[INFO:CONSOLE(17)] "Access to image at 'file:///android_asset/flutter_assets/assets/jump/box_bottom.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///android_asset/flutter_assets/assets/jump/index.html (17)
flutter 的webview封装
下面的是加载本地html文件为网页展示
..loadFlutterAsset("assets/jump/index.html");
但是打包后的网页内图片访问 就出上面的问题了
想要解决
将图片转换成dataUrl 替换进前端代码中去
在线转换生成DataURL\DataUri、图片转为DataURL\DataUri--查错网
去掉file-loader
如
<code>const box_bottom =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbwAAAAyBAMAAADVU3PwAAAAMFBMVEVerGr+bmH/xgD///9osXL/dmr/ySXo8+n/6uf/9+H/2XCUx5r/n5aTx5n/nZX/ySDNqwUbAAABPklEQVRo3u3arUoFURTF8Q1OE8NBponhCDdY/FjqvdcvBgwG02AxmKZp1WYUm00wGBUEm6BgFhGMgk8gPoIv4OQ565ziLfew/nHDCr++DVkn3jhnwE3ju/UeAAzvfdDxFeIDXNauW/kBYPDugg7PEwOcVdateAHQf7agvZP4wDBsfFivZVx70hHig0HtwsqWceFIB4lBv7KwomWcGmk3PjCse9YdcMvu84gPNh3rDXhl95nEYMNYT8CjkSbjA8OaZ/0CDbsvID5Ydax9oGb3MjFYMdYOUBmpiA8My541B3ga4oMlx5oGHC0xWDTWBGC06EA88cQTTzzxxBNPPPHEE0888cQTTzzxxBNPPPHEE0888cQTTzzx/s3L/3VgdI8f2471A3yz+2xisGWsL+DTSFPRQf5vO5k/XWWdeOPcH7PNWv+r2q/BAAAAAElFTkSuQmCC";
const box_middle =
"data:image/png;base64,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";
const box_top =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMYAAADGCAMAAAC+RQ9vAAAAM1BMVEUAAABol/D+bmH/xgBxnfCZuPXo7/3/yST/9+H/n5b/2XD/dmrq8P3/6eb/eGv/6uhUN9ZpAAAAAXRSTlMAQObYZgAAAZxJREFUeNrt2kFqw0AMBdBEiRPHdpzc/7SF4kK7kw02U+X9vRjeagRfpygRjJbyzXjeunMi3e0ZEccMxHuYLolMw/uHce/OyXT3iEMGYn5dknnNC+N2TucWcchADJd0hoXR5R/pIg4ZiCnPmBbGeUUiDhmIy4pgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGCUqjCLFMpF6v24Z08hljfiuWZg0wsxZ48t5mqnL/8/GC2lEsNZWEP/RpFfvMhOVWTDxcDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD4eEaRCrNIoVyk3l9/tHV3FvYrLngwGk4lhrOwhv6NIr94kZ2qyIaLgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgfHxjCIVZpFCuUi97yyslWC0FIyWUonxGPtrIv34iIidB7YzHv01mf4RsffAZsZ4TWeM2HtgM6PPP9JH7D2wmXFdkYi9BzAwMDAwMDBOqWBgYGBgYGBgYGBgYGBgYGBgYGBg/E3zFWZO0XyhnFM0X+/nFM0fW+QUzZ++YLSUnOILk0syTp0TgtwAAAAASUVORK5CYII=";
const Dot =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REVGODRBRjIyRjU2MTFFNUExM0Y4OUExMTc4QTBCQUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REVGODRBRjMyRjU2MTFFNUExM0Y4OUExMTc4QTBCQUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpERUY4NEFGMDJGNTYxMUU1QTEzRjg5QTExNzhBMEJBQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpERUY4NEFGMTJGNTYxMUU1QTEzRjg5QTExNzhBMEJBQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgDz1z0AAAZeSURBVHja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";code>
const express =
"data:image/png;base64,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";
export { box_bottom, box_middle, box_top, Dot, express };
使用
import { express } from "../res/dataUrl";
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:webview_flutter/webview_flutter.dart';
enum GameStatus {
ready,
start,
stop,
}
class JumpGame extends StatefulWidget {
const JumpGame({super.key});
@override
State<JumpGame> createState() => _LocalViewState();
}
class _LocalViewState extends State<JumpGame> {
late WebViewController controller;
GameStatus curStatus = GameStatus.ready;
@override
void initState() {
super.initState();
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setBackgroundColor(const Color(0x00000000))
..setNavigationDelegate(
NavigationDelegate(
onProgress: (int progress) {
// Update loading bar.
},
onPageStarted: (String url) {},
onPageFinished: (String url) {},
onWebResourceError: (WebResourceError error) {},
),
)
..addJavaScriptChannel('App', onMessageReceived: onMessageReceived)
..loadFlutterAsset("assets/jump/index.html");
}
void onMessageReceived(JavaScriptMessage message) async {
final messageJson = json.decode(message.message);
print(messageJson);
final messageMethod = messageJson["method"];
final messageData = messageJson["data"] ?? {};
switch (messageMethod) {
case "start":
show(
Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("开始"),
ElevatedButton(
onPressed: () {
SmartDialog.dismiss();
},
child: Text("开始"))
],
),
);
break;
case 'jumpSuccess':
// await Future.delayed(const Duration(milliseconds: 500));
show(
Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton(
style:
ElevatedButton.styleFrom(backgroundColor: Colors.orange),
onPressed: () {
SmartDialog.dismiss();
},
child: Text("继续"),
),
],
),
),
);
break;
case 'gameOver':
// await Future.delayed(const Duration(milliseconds: 500));
// Get.bottomSheet(
// isScrollControlled: true,
// ignoreSafeArea: true,
// isDismissible: false,
// backgroundColor: Colors.transparent,
// enableDrag: false,
// Container(
// height: 1.sh,
// width: double.infinity,
// color: Colors.red,
// child:
// ),
// );
show(Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.orange),
onPressed: () {
SmartDialog.dismiss();
controller.reload();
},
child: Text("重新开始"),
),
],
),
));
break;
}
// ScaffoldMessenger.of(context).showSnackBar(
// SnackBar(content: Text(message.message)),
// );
}
void show(Widget child) {
SmartDialog.show(builder: (context) {
return Container(
height: 1.sh,
width: 1.sw,
color: Colors.black26,
alignment: Alignment.center,
child: child,
);
});
}
@override
Widget build(BuildContext context) {
return SafeArea(
top: false,
bottom: false,
child: Scaffold(
appBar: AppBar(
title: const Text(
'跳一跳',
style: TextStyle(color: Color(0xff333333)),
),
),
body: WebViewWidget(controller: controller),
),
);
}
}
直接加载本地file形式的网页不推荐 ，这样图片只能转换成base64的，很长而且前端打包出的js很大。
..loadFlutterAsset("assets/jump/index.html");
使用另外一种思路。再flutter 的app端内建立一个http服务器，使用http服务器来托管flutter的asset文件。这样做到本地webview内部的网页也能够共享flutter的静态资源。
实现 jump 是html的网页文件路径(图片资源还可以转成webp的)
main.dart 开启http服务
<code> static initLocalWebServer() async {
final server = Jaguar();
server.addRoute(serveFlutterAssets());
await server.serve();
}
webview 设置加载
..loadRequest(Uri.http("127.0.0.1:8080", "jump/index.html"));
https://pub.dev/packages/jaguar_flutter_asset
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。