CODEWITHSUNDEEP
androidcordovameteor
Aditya
Aditya

Reputation: 63

External images not being displayed in Android app - Meteor - Cordova

I am developing an android app using Meteor and am having problems displaying images from external sources.

The following <img> tag should displays an image from the google maps api based on the latitude and longitude:

<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}}" />

Though this works in the browser, I get the below error on the server when trying to run it on an android device

XMLHttpRequest cannot load http://10.0.2.2:3000/sockjs/info?cb=p4ej3xginv. Origin http://meteor.local is not allowed by Access-Control-Allow-Origin.

Do I need to put the 'google maps api' domain in some kind of 'Whitelist' like when working with Phonegap.

If so, how do we do this in Meteor?

Upvotes: 3

Views: 2627

Answers (2)

SylvainB
SylvainB

Reputation: 4820

Yep, starting from 1.0.4, "Meteor Cordova apps no longer allow access to all domains by default."

So from now on, in your mobile-config.js file, you will have to call App.accessRule for every external domain you may load content from.

So in your case, adding:

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

at the end of your mobile-config.js file should do the trick.

Upvotes: 11

Erik Ušaj
Erik Ušaj

Reputation: 159

Adding access rules to mobile-config.js fixes loading of external images in Cordova apps.

  1. Create a mobile-config.js file in your project root
  2. Add App.accessRule('https://www.mycdn.com/*');
  3. Build and run your app meteor run ios

This is an alternative option, my guess is there might be some difference how this is built:

  1. Create a folder cordova-build-override in your project root
  2. Copy config.xml from .meteor/local/cordova-build to your newly created cordova-build-override folder
  3. Add external origin servers as needed <access origin="https://www.mycdn.com/*"/>
  4. Build and run your app meteor run ios

Initially I was trying with browser-policy package and setting BrowserPolicy.content.allowImageOrigin("https://www.mycdn.com/*");, but apparently that is a different story?

Upvotes: 4

Related Questions