Cordova iOS：加载资源失败：在此服务器上找不到请求的 URL

Question

编辑： 虽然我尝试了我已经尝试过的相同解决方案，但我得到了它与“cordova.file.documentsDirectory”一起使用，它一定是我上周错过的东西

原始问题：

我正在 Cordova 9.0.0 中构建一个 Leaflet 地图应用程序，它需要能够下载、解压缩、删除解压缩文件，然后从移动设备上的解压缩目录访问图像以供离线使用。

我正在使用 Cordova File、FileTransfer 和 Zip 插件，应用程序在 Android 设备上按预期工作，但在 iOS 上却没有（使用 cordova 平台 iOS 6.2.0）。

我已经在 iPhone 5s(iOS 12.5.4) 设备、iPhone 8(iOS 14.5) 模拟器、iPhone 11(iOS 14.5) 模拟器上在 Xcode 中测试过，我可以成功下载、解压、删除 zip 文件然后访问地图瓷砖通过 cordova.file.tempDirectory+"name_of_unziped_directory/" 或 cordova.file.applicationStorageDirectory+'Documents/name_of_unziped_directory/'(documentsDirectory) 或 cordova.file.documentsDirectory+'name_of_unziped_directory/' 离线时，但在 iPhone 11(iOS 14.7.1) 设备上测试时，我可以下载、解压缩和删除文件，但无法访问地图图块，我收到错误：

Failed to load resource: The requested URL file:///private/var/mobile/Containers/Data/Application/<uuid>/tmp/unzip_directory/zoom/x_coord/y_coord/image.png was not found on this server

我正在尝试访问这样的地图图块（在这种情况下，我们通过documentsDirectory进行访问，但是如果我改变上面提到的路径，它会给出相同的结果）：

 var mymap = L.map('mapid1').setView(coords, zoom);
 L.tileLayer(cordova.file.documentsDirectory + 'unzipped_directory/{z}/{x}/{y}.png', {
   attribution: 'Tiles © Esri',
   maxZoom: 16,
   minZoom: 5,
   trackResize: false,
 }).addTo(mymap);

我在这里阅读过关于堆栈溢出的类似问题，并尝试了我看到的所有类型的解决方案，但都没有成功。

我的尝试：

• 我尝试从 tempDirectory 或 applicationStorageDirectory+'Documents/'(documentsDirectory) 更改为 Cordova File Plugin 官方文档中列出的每个目录，但没有任何变化。

• 尝试使用“file:///”更改路径，没有“file:”，但使用 3 个斜杠“///”，只有一个斜杠“/”，没有斜杠，但我认为它没有不会有太大的不同，因为我总是收到相同的错误消息Failed to load resource: The requested URL file:///private/var/mobile/Containers/Data/Application/<uuid>/tmp/unzip_directory/zoom/x_coord/y_coord/image.png was not found on this server

• 尝试使用“cdvfile://”和“file://”并将其转换为 window.WkWebView.convertFilePath([your file path]);

• 尝试安装 cordova-plugin-uiwebview-engine 因为如果我理解正确，它允许访问应用程序之外的文件

• 尝试创建方案，例如：

<platform name="ios">
    <preference name="scheme" value="app" />
    <preference name="hostname" value="localhost" />
</platform>

没有成功。

• 我在config.xml 中的访问标签是这样设置的：<access origin="*" />

• 在我的元 CSP 标签中添加了“gap:”和“cdvfile:”，没有任何变化

• 我读过一些 HTTP 服务器通过 Ajax 从文件系统提供这些文件，但我担心这是不可能的，因为我的上级告诉我要避免这种解决方案

我尝试了其他类似问题的解决方案，但没有运气，如果我没有在这里列出它们，我很抱歉，但我试图解决这个问题大约一周，我忘记了我还尝试了什么. 也许我有什么问题，或者我不明白我应该如何理解文档，如果你们有解决方案或建议，我会很乐意尝试。

提前致谢！

Answer 1

我在 ios 的新版本中遇到了同样的问题。据我记得window.WkWebView.convertFilePath([your file path]); 还不够，我无法提供确切的解决方案，但我最终做的是：

if(path.startsWith("cdvfile://")) {
    resolveLocalFileSystemURL(path, p => {
       return WkWebView.convertFilePath(p.toURL())
    }
}

Answer 2

我用我已经尝试过的相同解决方案修复了它，并且我得到它与“cordova.file.documentsDirectory”一起使用，我第一次尝试时一定错过了一些东西。

Answer 3

使用 Cordova-ios v6.2.0 为我解决了这个问题 WkWebView.convertFilePath(cordova.file.dataDirectory+myfile) 并将架构和主机名首选项添加到 config.xml

<platform name="ios">
    <preference name="scheme" value="app" />
    <preference name="hostname" value="localhost" />
</platform>