Meteor Mobile Server on Heroku - No Access-Control-Allow-Origin header is present

Question

Let me start by saying I've found several proposed solutions online, but none of them seem to work for me.

Issue:

I have a meteor app I'm trying to run on android. For this, I've deployed the app on Heroku and I call the run android-device command using the --mobile-server https://myapp.heroku.com parameter.

I permanently receive the error

"XMLHttpRequest cannot load https://myapp.heroku.com/sockjs/... . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:12848' is therefore not allowed access. The response had HTTP status code 404.", source: http://localhost:12848/ (0)

Here is what I've tried so far:

I set ROOT URL at meteor startup:

  process.env.ROOT_URL = "https://myapp.heroku.com";  

I tried setting the Access Control like this, server-side at meteor startup:

  WebApp.connectHandlers.use(function(req, res, next) {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS');
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.header('Access-Control-Allow-Origin', 'https://myapp.heroku.com');
    res.header('Access-Control-Allow-Origin', 'http://localhost:12848');
    res.header('Access-Control-Allow-Origin', 'http://meteor.local');
    res.header("Access-Control-Allow-Headers", "Content-type,Accept,X-Custom-Header");
    return next();
  });

I tried to use the browser-policy package, like this, server-side at meteor startup:

  BrowserPolicy.content.allowSameOriginForAll();
  BrowserPolicy.content.allowOriginForAll('*');
  BrowserPolicy.content.allowOriginForAll('http://meteor.local');
  BrowserPolicy.content.allowOriginForAll('https://myapp.heroku.com');
  BrowserPolicy.content.allowOriginForAll('https://*.myapp.heroku.com');
  BrowserPolicy.content.allowEval();

I tried adding access rules to "mobile-config.js":

App.accessRule("*");

I made sure the name in the "package.json" file under root is identical to the App name under "mobile-config.js"

What else am I missing?

Edit:

I've also tried adding the express and cors packages to whitelist local host:

  var whitelist = [
  'http://localhost:3000',
  'http://localhost:12848',
  'https://myapp.heroku.com'
  ];
  var corsOptions = {
      origin: function(origin, callback){
          var originIsWhitelisted = whitelist.indexOf(origin) !== -1;
          callback(null, originIsWhitelisted);
      },
      credentials: true
  };
  app.use(cors(corsOptions));

Also tried to enable pre-flight, like this:

app.options('*', cors())

Answer 1

This is probably the stupidest problem I ever ran into. Trying to run the app using the --mobile-server https://myapp.heroku.com parameter was wrong. Instead, it should be https://myapp.herokuapp.com

That was it. That was the problem all along...

Answer 2

Adding '*' to whitelist should do the job. The ultimate solution lies within config.xml, this should be helpful: https://stackoverflow.com/a/36124935/8056323