0

I am looking for a way to allow browser-hosted JS app to make requests to server running on different port and, possibly, different machine than that which is serving up JS app in the first place.

I am serving a simple JavaScript (HTML5) app from my Mac OS X Apache web server. I would like to be able to run this app in as many browsers as possible across Windows, Android and OS X. But I would settle for one on each.

My JavaScript app uses XMLHttpRequest to make requests of a minimal custom server that returns JSON.

So, for example, my JS app is accessible at http://10.0.1.3/poc/dashboard.html

and my custom server is running on same machine, listening on port 49379 ... a request like this http://10.0.1.3:49379/find?name=Fred would return a set of tuples where 'name' equals 'Fred'.

If I enter this request directly into navigation toolbar, then I get desired result.

If I make same request within JS, I get a couple of errors.

var theXHR = new XMLHttpRequest();
theXHR.onreadystatechange = onReadyStateHandler;
theXHR.open("GET", "http://" + ipAddress + ":49379/find?name=Fred", true);
theXHR.setRequestHeader("User-Agent", "XMLHTTP/1.0");
theXHR.send(null);

I get these two errors:

  1. Refused to set unsafe header "User-Agent"

  2. XMLHttpRequest cannot load http://10.0.1.3:49379/find?name=Fred. Origin http://10.0.1.3 is not allowed by Access-Control-Allow-Origin.

I have control over Apache server, JavaScript and custom server. This is just a proof of concept piece that will be demoed on isolated networks. So, I am not concerned with security issues.

Also, I am running in Chrome, Firefox, Safari. All of these appear to use the XMLHttpRequest2 object.

westsider
  • 4,967
  • 5
  • 36
  • 51

1 Answers1

1

I have found the way to get around CORS is to use jsonp - which is json with a callback function - I've never used it with XMLHttpRequest, but it works with jQuery ajax functions like $.getJSON. In your url query string simply add the parameter jsoncallback=? and voila, no more CORS problems. $.getJSON dynamically assigns its success parameter to the callback function.

inorganik
  • 24,255
  • 17
  • 90
  • 114
  • thanks. I have been avoiding using jQuery in an effort to keep things simple. I feel the pull but would like to find another way, using XMLHttpRequest if possible - even if that means making mods to httpd.conf – westsider Mar 07 '13 at 19:36
  • After trying variants of 'Header set Access-Control-Allow-Origin *' and seeing no change in browser behavior, I adopted jQuery approach with callback=?. This complicated some of the path parsing that my custom server was doing, so I have gone to client-side 'named callback function' approach. This seems to have solved initial problem. Now I have some conflict in JSON serialization that I need to understand/fix. – westsider Mar 08 '13 at 00:42
  • Note that this approach results in JSONP (not JSON) result. See http://stackoverflow.com/questions/7936610/json-uncaught-syntaxerror-unexpected-token for more info on this. – westsider Mar 08 '13 at 18:52