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

BTW This site and API is AWESOME!!! I just discovered it a few months ago. Let me know if you need additional help with the answer below. — Tim Wickstrom, Mar 26 '12 at 20:14

score 1 · Answer 1 · edited May 23 '17 at 12:10

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

score 1 · Answer 2 · answered Mar 26 '12 at 20:12

Hey man check out mootools more JSONP this will solve your problem:

http://mootools.net/docs/more/Request/Request.JSONP

Also it looks like your forgetting to ask for it in JSON format from geonames.org

Try something like:

var myJSONP = new Request.JSONP({
    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);
    }
}).send();

Hope this helps!

mootools Request class and CORS

2 Answers2