mootools Request class and CORS

Question

I'm trying to use CORS to have a script do an Ajax request to geonames. My script calls this web service method: http://www.geonames.org/export/web-services.html#findNearby

If you check the response headers of the sample call, they include: Access-Control-Allow-Origin: *

When I try this with mootools (version 1.4.5 just downloaded):

var urlGeonames = "http://api.geonames.org/findNearbyPlaceName";
var req = new Request({
  method: 'get',
  url: urlGeonames,
  data: {
'lat': '89.18',
'lng': '-0.37',
'username': 'myusername',
'radius': '5'
  }
}).send();

then I get an error that says :

XMLHttpRequest cannot load
http://api.geonames.org/findNearbyPlaceName?lat=89.18&lng=-0.37&username=myusername&radius=5. 
Origin http://127.0.0.1 is not allowed by Access-Control-Allow-Origin.</pre>

On the other hand, when I try old style Ajax code like this:

invocation = new XMLHttpRequest();
if(invocation)
 {    
  invocation.open('GET', urlFlickr, true);
  invocation.onreadystatechange = handler;
  invocation.send(); 
 }

then it works and I get the XML response in the XHR responseXML.

I found this post A CORS POST request works from plain javascript, but why not with jQuery? that is similar. But here I'm not dealing with my server so I can only work on the javascript side.

Has anyone worked with CORS and mootools and can help on this issue ? Thanks so much JM

Answer 1

The first answer on this other thread: MooTools CORS request vs native Javascript

Might help.

Basically, the X-Requested-With header is automatically sent by the Mootools with the request, but the server either has to be configured to accept that header or you can remove it using

delete foo.headers['X-Requested-With'];

Before calling

foo.send();

To allow it by the server, you can add this to the .htaccess file of your script that gives back the JSON data:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

So yours would look like:

var myJSON = new Request({
    url: 'http://api.geonames.org/findNearbyPlaceNameJSON',
    data: {
       'lat': '89.18',
       'lng': '-0.37',
       'username': 'myusername'
    },
    onRequest: function(url){
        // a script tag is created with a src attribute equal to url
    },
    onComplete: function(data){
       // the request was completed.
       console.log(data);
    }
});
delete myJSON.headers['X-Requested-With'];
myJSON.send();