"不允许为PhoneGap Build中的远程页面中的本地映像加载本地资源"

Question

我正在为一个phonegap构建应用程序托管我的网页.我想使用相机上传照片,并显示预览图像,基本上这样做:

<img src="file:///storage/emulated/0/Android/data/com.myapp.myapp/cache/1470418568917.jpg" height="500" />

因为我的网页是托管的,我收到此错误:

不允许加载本地资源:file:///storage/emulated/0/Android/data/com.myapp.myapp/cache/1470418568917.jpg",来源:https://www.myapp.com/v5.5 /imager.html#

我假设这是一些CORS问题,所以我已将其添加到页面的html中

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

这到我的config.xml(我正在使用Phonegap Build)

 <plugin name="cordova-plugin-whitelist" source="npm" />

 <allow-navigation href="*" />
 <allow-navigation href="*://*/*" />
 <allow-navigation href="file:///*/*" />
 <allow-navigation href="http://*/*" />
 <allow-navigation href="https://*/*" />
 <allow-navigation href="data:*" />

 <allow-intent href="*" />
 <allow-intent href="http://*/*" />
 <allow-intent href="https://*/*" />
 <allow-intent href="tel:*" />
 <allow-intent href="sms:*" />
 <allow-intent href="mailto:*" />
 <allow-intent href="geo:*" />

 <access origin="*" />
 <access origin="*://*/*" />
 <access origin="file:///*" />
 <access origin="cdvfile://*" />
 <access origin="content:///*" />

正如你所看到的,我已经尝试过每一个我能想到的设置,从网上搜索.我错过了一些明显的东西吗

提前致谢.

Answer 1

OK终于得到了一个解决方法,即将file:/// URI转换为cdvfile:// URI,我的页面只是抱怨混合内容警告,并且允许我访问!

function getFileEntry(imgUri) {
            window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) {
                console.log("got file: " + fileEntry.fullPath);
                console.log('cdvfile URI: ' + fileEntry.toInternalURL());
                $('#imgPreview').attr("src", fileEntry.toInternalURL());
            });
        }

仍然很高兴有一个正确的方法来访问file:/// URIs,我可以看到这种情况不起作用的情况,但是我正在做的事情已经解决了.

Answer 2

对于遇到此问题的未来用户,请注意这一点,请确保在测试此类功能时,您不会在"实时重新加载"模式下运行.Live Reload将导致同样的错误消息,这显然具有误导性.在没有实时重新加载的构建之后,使用以下文件对我来说一切正常:/或cdv:/ path.

Answer 3

我最近遇到了同样的问题.看来cordova ios应用程序在localhost:8080内部运行,这是它不允许从"file://"协议加载文件的主要原因.

容易修复 - "var workingPath = window.Ionic.normalizeURL(givenPath)";

请阅读IONIC的文章 - https://ionicframework.com/docs/wkwebview/