外部图像未在 Android 应用程序中显示 - Meteor - Cordova

Question

我正在使用 Meteor 开发一个 Android 应用，但在显示来自外部来源的图像时遇到问题。

下面的<img> 标签应该根据纬度和经度显示来自谷歌地图 api 的图像：

<img src="http://maps.googleapis.com/maps/api/staticmap?center={{loc.lat}},{{loc.lng}}&zoom=15&size=600x300&maptype=roadmap&markers=color:blue%7C{{loc.lat}},{{loc.lng}}" />

虽然这在浏览器中有效，但当我尝试在 android 设备上运行它时，我在服务器上收到以下错误

XMLHttpRequest 无法加载 http://10.0.2.2:3000/sockjs/info?cb=p4ej3xginv。 Access-Control-Allow-Origin 不允许来源http://meteor.local。

我是否需要将“google maps api”域放入某种“白名单”中，例如使用 Phonegap 时。

如果是这样，我们如何在 Meteor 中做到这一点？

Answer 1

是的，从 1.0.4 开始，"Meteor Cordova apps no longer allow access to all domains by default."

因此，从现在开始，在您的 mobile-config.js 文件中，您必须为每个可能从中加载内容的外部域调用 App.accessRule。

所以在你的情况下，添加：

App.accessRule('http://maps.googleapis.com/*');

在mobile-config.js 文件的末尾应该可以解决问题。

Answer 2

向 mobile-config.js 添加访问规则修复了 Cordova 应用程序中外部图像的加载问题。

1. 在您的项目根目录中创建一个 mobile-config.js 文件
2. 添加App.accessRule('https://www.mycdn.com/*');
3. 构建并运行您的应用程序meteor run ios

这是一个替代选项，我猜它的构建方式可能会有所不同：

1. 在您的项目根目录中创建一个文件夹 cordova-build-override
2. 从 .meteor/local/cordova-build 复制 config.xml 到您新创建的 cordova-build-override 文件夹
3. 根据需要添加外部源服务器<access origin="https://www.mycdn.com/*"/>
4. 构建并运行您的应用程序meteor run ios

最初我尝试使用 browser-policy 包并设置 BrowserPolicy.content.allowImageOrigin("https://www.mycdn.com/*");，但显然这是另一回事？