“不允许加载本地资源”从PhoneGap Build中的远程页面获取本地映像 [英] "Not allowed to load local resource" for Local image from Remote page in PhoneGap Build

问题描述

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

I'm hosting my webpages for a phonegap build app. I'd like to use the camera to upload a photo, and show a preview the image, basically doing this:

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

因为我的网页被托管我收到此错误：

Because my pages are hosted I'm getting this error:

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

Not allowed to load local resource: file:///storage/emulated/0/Android/data/com.myapp.myapp/cache/1470418568917.jpg", source: https://www.myapp.com/v5.5/imager.html#

我认为这是一些CORS问题，所以我已将此添加到页面的html中

I assume that this is some CORS problem, so I've added this to the html of the page

<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（我' m使用Phonegap Build）

and this to my config.xml (I'm using 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:///*" />

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

As you can see I've tried every setting I can think of, from scouring the web. Am I missing something obvious?

提前致谢。

推荐答案

确定最终得到了一个解决方法，即将file：/// URI转换为cdvfile：// URI，我的页面只是抱怨混合内容警告，并允许我访问！

OK finally got a workaround, which is to convert the file:/// URI to a cdvfile:// URI, which my page only complains is a mixed content warning, and does allow me to access!

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仍然会很好：/// URI，我可以看到这不起作用的情况，但是我正在做的事情已经解决了。

Would still be nice to have a proper way to access file:/// URIs, I can see cases where this wouldn't work, but for what I'm doing this is resolved.

这篇关于“不允许加载本地资源”从PhoneGap Build中的远程页面获取本地映像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！