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())

Did you make sure that the resource you're trying to access actually exists? (focusing on the rear part of the error message which gives 404 report) — elk, Jul 25 '17 at 20:22
Well, the client on the app loads everything that is client-side, but nothing from the server. Another client (which is on heroku, together with the server) loads everything fine. So I'd say yes to that. — Cos, Jul 25 '17 at 21:21

score 1 · Accepted Answer · answered Jul 28 '17 at 14:35

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...

answered Jul 28 '17 at 14:35

Cos

1,649
1
27
50

1

Well... :D I wouldn't say I told you so but... ;-) thanks for posting the answer. This might save other people from major headaches. – elk Jul 29 '17 at 16:02

score 0 · Answer 2 · answered Jul 25 '17 at 21:44

0

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

answered Jul 25 '17 at 21:44

V. Flyson

1

According to the first answer here https://stackoverflow.com/questions/29279287/in-meteor-app-how-to-add-orgin-in-cordova-config-xml and the documentation here https://guide.meteor.com/mobile.html#domain-whitelisting , I have already done this in the step where I added access rules to "mobile-config.js" like this: App.accessRule("*"); – Cos Jul 26 '17 at 11:18

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

2 Answers2