Cordova (iOS and Android) cannot connect XHR / sockjs / CORS when setting up Nginx


#1

Hi,

I have a Meteor 1.3 app with web, cordova clients iOS and Android. I am using WKWebview for iOS. To scale the app, I try to set up nginx with proxy redirect and https. It works fine with web but cordova client are broken. They cannot connect especially XHR request with CORS issue.

I’ve tried every possible solution:

  • removed force-ssl,
  • allowed App.accessRule("*") localhost … in mobile-config.js,
  • added CORS header on the node / meteor process with
WebApp.connectHandlers.use(function(req, res, next) {
		// add allow origin
		res.setHeader('Access-Control-Allow-Origin', '*');
		//http://plugins.telerik.com/cordova/plugin/wkwebview
		// Traditionally JavaScript can't make requests across domain boundaries. UIWebView was able to do this because the file protocol is not a domain. Since WKWebView uses the http protocol, you'll need to add CORS headers to your server. More specifically you need this header:
		// 	Access-Control-Allow-Origin: *
		// And depending on your configuration you may also need these:
		// Access-Control-Allow-Headers: Accept, Origin, Content-Type
		// Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
		// It's probably easiest to add all of them, confirm your app works and gradually remove headers.
		// add headers
		res.setHeader('Access-Control-Allow-Methods', [
			'GET, POST, PUT, DELETE, OPTIONS'
		].join(', '));
		res.setHeader('Access-Control-Allow-Headers', [
			'Accept',
			'Content-Type',
			'Origin'
		].join(', '));
		return next();
	});
  • added CORS header on Nginx
location / {
    #if ($request_filename ~* ^.*?/([^/]*?)$) {
    #  set $filename $1;
    #} 
    #if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$) {
    #  add_header Access-Control-Allow-Origin *; 
    #}   
    proxy_pass http://carmel_upstream; # the name used in upstreams, substituted for any of the defined instances
    proxy_redirect off;
    proxy_set_header Access-Control-Allow-Origin *;
    proxy_set_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, PUT, DELETE';
    proxy_set_header Access-Control-Allow-Headers 'X-Requested-With,Accept,Content-Type, Origin';
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
   #https://gist.github.com/pauloricardomg/7084524
 
    # OPTIONS indicates a CORS pre-flight request
    #if ($request_method = 'OPTIONS') {
    #   set $cors "o";
    #}
    #else ($cors = "1") {
    #   more_set_headers 'Access-Control-Allow-Origin: $http_host';
       #more_set_headers 'Access-Control-Allow-Origin: *';
    #i}
    #more_set_headers 'Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE';
    #more_set_headers 'Access-Control-Allow-Headers: Origin,Content-Type,Accept';

    #proxy_set_header 'Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE';
    #proxy_set_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin'
    # Make sure to use WebSockets
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

but it still doesn’t work …

This is very frustrating to spend so much time to scale the app. All together must be 15 days…

How does the built-in WKWebview engine from meteor differs to https://github.com/driftyco/cordova-plugin-wkwebview-engine which seems to circumvent XHR issue ?

Can we replace one for the other ? Or is there a simpler solution?

[Error] XMLHttpRequest cannot load https://carmelu.gosmartix.com/sockjs/info?cb=o34rhuriwn. Origin http://localhost:12648 is not allowed by Access-Control-Allow-Origin.

When I do curl I get:

dan@LG1:~/DEV/github8/lgen/app$ curl -I https://carmelu.gosmartix.com/sockjs/info?cb=o34rhuriwn
HTTP/1.1 405 Method Not Allowed
Server: nginx
Date: Fri, 23 Sep 2016 16:01:33 GMT
Connection: keep-alive
Allow: OPTIONS, GET
Access-Control-Allow-Origin: *

Your help is really welcome as I run out of ideas to fix this issue. Also I wonder how Meteor dev are running app in production (apart from Galaxy,…) as I believe my set up is nothing exceptional. Thanks in advance


iOS WKWebView: Origin http://localhost:12344 is not allowed by Access-Control-Allow-Origin
#3

Did you solve this ? I have very similar issue - my iOS app is fine yet android app just hangs on launch failing to reach login screen … I am seeing traffic on my nginx log

???