为什么我收到跨域请求被阻止的原因：同源策略禁止读取远程资源

Question

Okay so I am playing around with using API's and currently I am using the geonames api. My problem is it works fine until...

Let me explain, when I write the code as such

$(document).ready(function() {


        Date.prototype.dateToString = function() {
               var yyyy = this.getFullYear().toString();
               var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
               var dd  = this.getDate().toString();
               return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]); // padding
        };

        var d = new Date();
        var date = d.dateToString();


        $.ajax({
            dataType: "json",
            url: url
        }).then(function(data){

            var latitude = data.geonames[0].lat;
            var longitude = data.geonames[0].lng;

            var north = parseFloat(latitude) + 1;
            var south = parseFloat(latitude) - 1;
            var east = parseFloat(longitude) + 1;
            var west = parseFloat(longitude) - 1;

            var uri = encodeURI("http://api.geonames.org/earthquakesJSON?north=" + north + "&south=" + south + "&east=" + east + "&west=" + west + "&date=" + date +"&username=demo"); 

            $.ajax({
                dataType: "json",
                url: uri
            }).then(function(eData){

                var myLatlng = new google.maps.LatLng(parseFloat(data.geonames[0].lat), parseFloat(data.geonames[0].lng));

                function initialize() {

                    var mapProp = {
                        center : myLatlng,
                        minzoom: 1,
                        maxzoom: 20,
                        zoom : 7,
                        mapTypeId : google.maps.MapTypeId.ROADMAP
                    };

                    var map = new google.maps.Map(document.getElementById("googleMap"),
                        mapProp);

                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        title: 'Search Location\nLatitude: ' + data.geonames[0].lat + '\nLongitude: ' + data.geonames[0].lng  
                    }); 

                    for(item = 0; item < eData.earthquakes.length; item++){

                        if (eData.earthquakes.length > 0){
                            var eLat = eData.earthquakes[item].lat, eLng = eData.earthquakes[item].lng;
                        } else {
                            var eLat = '', eLng = '';
                        }
                        new google.maps.Marker({
                            position: new google.maps.LatLng(eLat,eLng),
                            map: map,
                            title: 'Date and Time: '+eData.earthquakes[item].datetime+'\nMagnitude: '+eData.earthquakes[item].magnitude+'\nDepth: '+eData.earthquakes[item].depth+'\nLat: '+eData.earthquakes[item].lat+'\nLong: '+eData.earthquakes[item].lng 
                        });
                    }
                }
                initialize();

                });
            });
        });

It will work just fine, loads when the page comes up as it is supposed to do, However if I wrap it in a function like this

 function getSearch(url){
    $(document).ready(function() {


        Date.prototype.dateToString = function() {
               var yyyy = this.getFullYear().toString();
               var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
               var dd  = this.getDate().toString();
               return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]); // padding
        };

        var d = new Date();
        var date = d.dateToString();


        $.ajax({
            dataType: "json",
            url: url
        }).then(function(data){

            var latitude = data.geonames[0].lat;
            var longitude = data.geonames[0].lng;

            var north = parseFloat(latitude) + 1;
            var south = parseFloat(latitude) - 1;
            var east = parseFloat(longitude) + 1;
            var west = parseFloat(longitude) - 1;

            var uri = encodeURI("http://api.geonames.org/earthquakesJSON?north=" + north + "&south=" + south + "&east=" + east + "&west=" + west + "&date=" + date +"&username=demo"); 

            $.ajax({
                dataType: "json",
                url: uri
            }).then(function(eData){

                var myLatlng = new google.maps.LatLng(parseFloat(data.geonames[0].lat), parseFloat(data.geonames[0].lng));

                function initialize() {

                    var mapProp = {
                        center : myLatlng,
                        minzoom: 1,
                        maxzoom: 20,
                        zoom : 7,
                        mapTypeId : google.maps.MapTypeId.ROADMAP
                    };

                    var map = new google.maps.Map(document.getElementById("googleMap"),
                        mapProp);

                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        title: 'Search Location\nLatitude: ' + data.geonames[0].lat + '\nLongitude: ' + data.geonames[0].lng  
                    }); 

                    for(item = 0; item < eData.earthquakes.length; item++){

                        if (eData.earthquakes.length > 0){
                            var eLat = eData.earthquakes[item].lat, eLng = eData.earthquakes[item].lng;
                        } else {
                            var eLat = '', eLng = '';
                        }
                        new google.maps.Marker({
                            position: new google.maps.LatLng(eLat,eLng),
                            map: map,
                            title: 'Date and Time: '+eData.earthquakes[item].datetime+'\nMagnitude: '+eData.earthquakes[item].magnitude+'\nDepth: '+eData.earthquakes[item].depth+'\nLat: '+eData.earthquakes[item].lat+'\nLong: '+eData.earthquakes[item].lng 
                        });
                    }
                }
                initialize();

                });
            });
        });
}

I get this error....

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote 
resource at http://api.geonames.org/searchJSON?q=Fukushima&maxRows=10&username=demo. 
This can be fixed by moving the resource to the same domain or enabling CORS.

I haven't done enough server side or working with API's to know exactly what this means, or why the only time it happens is if I am trying to call this method from a form.

EDIT:::

While typing this I realized that it wasn't the wrapping in the function that was doing it but rather the changing of the URL when the form was submitted hence the mention of the domain in the error, I should have slowed down to read a little better. However since I am doing this in javascript and ajax I would like to know since I do know that form handling can be done without invoking the server how would I go about doing that.

I understand if no one gives a direct answer I actually prefer that no one does but rather points me in the direction of documentation for client side form handling with javascript and ajax with a brief explanation or history of its use.

Thank you all!

Answer 1

CORS (cross-origin resource sharing) stipulates that AJAX requests fired from a browser can only contact their same host. This means that JavaScript running on disney.com can only make AJAX requests to other disney.com endpoints.

Your issue is that you're sending a request to api.geonames.org even though you are likely running on your own host, not an api.geonames.org site.

Servers can enable CORS, meaning that they will accept requests from other domains. However, each server is different and most APIs still do not allow cross-origin requests. It looks like api.geonames.org is one of these that does not support CORS.

Note that CORS only applies to requests sent from a browser. Hitting that API from a backend server (like Node or Rails) will work just fine.