Origin is not allowed by Access-Control-Allow-Origin error

Question

Hi,

We have created one application that is used to plot the area(ploygon) on map. We used https://platform.bing.com/geo/spatial/v1/public/geodata. Below is our code

 _map.getCredentials(function (credentials) {
            var boundaryUrl = https://platform.bing.com/geo/spatial/v1/public/geodata?SpatialFilter=
                  + "GetBoundary('" + data + "',1,'" + regionType + "',0,0,'en','US')&$format=jsonp&key=" + credentials;

            http = new XMLHttpRequest();

            http.open('GET', boundaryUrl, true);

            http.onreadystatechange = function (evt) {
                if (http.readyState == 4 && http.status == 200) {
                    // alert(http.responseText);

                    res = http.responseText;

                    //call this function to outline the map
                    boundaryCallback(res);
                }
            }
            http.send(null);
        });  

This code is working fine in internet explorer but it throws below error in Google chrome/ firefox.

XMLHttpRequest cannot load http://platform.bing.com/geo/spatial/v1/public/geodata?SpatialFilter=GetBou…=json&key=AmK-RNA0Na30aVU82KKUMDMGlGezRdvHAc6lAHEcodNdzyfteINDzmW2OlOkV_TM. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Can you please let us know we missed anything or have any alternative way to achieve this.

Thanks!

Balasaheb

Answer 1

This is because you are making a cross domain call. XMLHttpRequest doesn't support JSONP. There are several ways around this. If you are using pure JavaScript and HTML, then you can use JSONP and a script tag to make your requests. For example:

var boundaryUrl = "https://platform.bing.com/geo/spatial/v1/public/geodata?SpatialFilter=""
                  + "GetBoundary('" + data + "',1,'" + regionType + "',0,0,'en','US')&$format=json&jsonp=boundaryCallback&key=" + credentials;

CallRestService(boundaryUrl);			  


function CallRestService(request) 
{
	var script = document.createElement("script");
	script.setAttribute("type", "text/javascript");
	script.setAttribute("src", request);
	document.body.appendChild(script);
}

Note that the format should be json and you pass the name of your callback function into a jsonp parameter of the request.

If you are using jQuery or AngularJS, take a look at this blog post: https://blogs.bing.com/maps/2015/03/05/accessing-the-bing-maps-rest-services-from-various-javascript-frameworks/

---

http://rbrundritt.wordpress.com

Answer 2

This is happening because of the CORS (Cross Origin Resource Sharing) error. This error occurs when you try to access a domain/resource from another domain. You cannot issue requests through the XMLHttpRequest to other domains or subdomains. For example, if you are doing something like writing HTML and Javascript in a code editor on your personal computer, and testing the output in your browser, you might probably get error messages about Cross Origin Requests .

JSONP ( JSON with Padding ) is a method commonly used to bypass the cross-domain policies in web browsers. 

If this is for local development and you are using Chrome , you need to run Chrome with a couple of arguments to relax security like this:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security

If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

Access-Control-Allow-Origin: http://localhost:9999

The other easy way out, would be to create a proxy on your local server, which gets the remote request and then just forwards it back to your javascript.