Flutter使用flutter_inappwebview加载本地资产文件报无法加载错误

API 探路者

2026-10-8

解决方案

你遇到的报错本质是两个核心原因：

本地http服务默认只映射Flutter项目的assets目录路由，你在JS中写了手机本地存储的绝对路径作为http请求地址，本地服务无法识别该路径对应的资源
基础配置存在语法错误、权限配置缺失

修正基础错误
首先修正Dart代码中的三处问题：

修正initialUrl的Uri格式，补充缺失的//：

initialUrlRequest: URLRequest(url: Uri.parse('http://127.0.0.1:8080/assets/in/index.html'))

删除onLoadStop中多余的controller.evaluateJavascript(行，避免语法报错

补充WebView的基础文件访问权限配置：

crossPlatform: InAppWebViewOptions(
  allowFileAccess: true, // 新增这行，开启本地文件访问权限
  allowFileAccessFromFileURLs: true,
  allowUniversalAccessFromFileURLs: true,
  javaScriptEnabled: true,
),

调整资源访问路径
本地http服务的路由根目录对应你Flutter项目的assets目录，不需要写手机本地的完整绝对路径，直接按资产的相对路径访问即可：
JS代码中的请求url修改为：
```
url: "/assets/gis/pfz.json",
```
如果你需要访问weather/wind_speed/下的json文件，同理请求路径写/assets/weather/wind_speed/2021081310.json即可
确认资产声明
打开项目根目录的pubspec.yaml，确认所有需要访问的静态资源目录都已正确声明，未声明的资源不会被打包进安装包，也无法访问：
```
flutter:
  assets:
    - assets/in/
    - assets/gis/
    - assets/weather/wind_speed/
```
可选优化方案：改用file协议加载（更稳定）
如果不需要使用http服务，直接用file协议加载本地html会避免很多路由映射问题，兼容性更强：
1. 页面初始化时先获取资产的标准跨平台访问路径：
```
final htmlPath = await InAppWebViewController.getAssetUrl('assets/in/index.html');
```
2. 把initialUrlRequest改成访问该file路径：
```
initialUrlRequest: URLRequest(url: Uri.parse(htmlPath)),
```
3. JS中的请求路径直接用相对路径即可：
```
url: "../gis/pfz.json",
```