为什么我的 IOS 应用拒绝 cdvfile:// 和 file:/// 链接？答案

【问题标题】：Why is my IOS app rejecting cdvfile:// and file:/// links?为什么我的 IOS 应用拒绝 cdvfile:// 和 file:/// 链接？
【发布时间】：2015-09-13 06:31:30
【问题描述】：

我在 angular/ionic/cordova 应用程序中显示下载到 cordova.file.dataDirectory 的图像时遇到问题。

我正在使用 cordova-plugin-file 并且我能够下载文件，并使用 .toInternalURL() 和/或 .toURL() 提取 URL。然而，角度列表视图正在拒绝它们。我正在为 Ios 使用 WkWebView，并且我的代码在 Android 上运行良好（使用 .toInternalURL() ）。我已经在配置和元内容安全策略中将 cdvfile://* 和 file:///* 都列入了白名单...

我添加了屏幕截图这是 .toInternalURL() 生成的链接的控制台屏幕截图

这是 .toURL() 生成的链接的屏幕截图：

这是我使用的安全策略：

<meta http-equiv="Content-Security-Policy" content="default-src * data: cdvfile://* content://* file:///*; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; media-src *">

【问题讨论】：

标签： ios angularjs cordova filesystems cordova-plugin-file

【解决方案1】：

好的，原来我的问题是 WKWEBVIEW。我一直在使用它，但没有意识到这是我问题的根源。

所以要在 src 属性中使用存储的图像路径，不要使用 cdvfile:// 或 file:///。而是创建一个如下所示的路径：

http://localhost:12344/Library/NoCloud/ho_tylw7Ygc.jpg

在 entry.fullPath 前添加“http://localhost:12344/Library/NoCloud”，您就可以指向应用的 dataDirectory。

【讨论】：

感谢您的信息！我将图像保存到cordova.file.cacheDirectory，所以我的链接看起来像./Library/Caches/filename.jpg。
嘿，我遇到了同样的问题，但视频无法正常工作。你能帮帮我吗？这就是我得到的绝对网址：file:///var/mobile/Containers/Data/Application/A313B954-55C5-49F1-801F-5AF519EA4E8E/Library/files/video/High-Knees.mp4。这些是我尝试过的组合（没有一个有效）：http://localhost:12344/Library/files/video/High-Knees.mp4http://localhost:12344/video/High-Knees.mp4http://localhost:12344/var/mobile/Containers/Data/Application/A313B954-55C5-49F1-801F-5AF519EA4E8E/Library/files/video/High-Knees.mp4
让我正确理解这一点...我的应用程序中需要一个 HTTP 服务器才能正常工作？

【解决方案2】：

为了让它发挥作用，我必须做以下技巧：

我在 url http://localhost:potr/local-filesystem/ 中添加了“本地文件系统”后缀
然后我在 file:// 之后添加了整个路径，例如http://localhost/:port/local-fileystem//Users/...
但是为了让事情顺利进行，如果您查看 document.location.href，您将看到 cdvToken 参数。它需要添加到您烘焙的 url 中为 ?cdvToken=blah-blah-blah

只有在那之后事情才开始起作用。请注意，我使用 'local-webserver' npm pacakge 作为 cordova-labs-local-webserver（版本 1.0.0-dev。）其他版本可能会有所不同。

【讨论】：

【解决方案3】：

对于使用 Ionic 3 的人来说，这确实对我有用：

import {normalizeURL} from 'ionic-angular';

normalizeURL(cordova.file.dataDirectory + file.fullPath)

也许这更安全，因为它依赖于 cordova.file.dataDirectory 而不是硬编码字符串

【讨论】：

【解决方案4】：

另一种不涉及使用本地网络服务器的方法是使用来自 blob 的 URL.createObjectURL 创建 URL。只需确保在使用完 URL 后撤消它，以避免内存泄漏。

请注意，您需要将“blob:”添加到 Content-Security-Policy 中的 default-src：

为此，您需要将文件条目作为 ArrayBuffer 读取，创建一个 blob，然后创建一个 URL，如果您将“blob:”添加到 Content-Security-Policy，此 URL 适用于视频和图像

const reader = new FileReader();
reader.onloadend = function() {
    const blob = new Blob([this.result]);
    url = URL.createObjectURL(blob));
};
reader.readAsArrayBuffer(fileentry);

当你完成后，说当他们移动到另一个页面时撤销 URL：

URL.revokeObjectURL(url)

我有一个帮助模块来跟踪所有 URL，当路由发生变化时，我调用 clearBlobURLs 将它们全部撤消。

const urls:string[] = [];

function createBlobURL(blob:Blob) : string {
    const url = URL.createObjectURL(blob);
    urls.push(url);
    return url;
}

function clearBlobURLs() {
    urls.forEach(url => {
        URL.revokeObjectURL(url);
    })
}

export {createBlobURL,clearBlobURLs};

【讨论】：