none
Origin is not allowed by Access-Control-Allow-Origin error RRS feed

  • 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


    Thursday, December 3, 2015 11:32 AM

Answers

  • 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

    Friday, December 4, 2015 5:27 PM

All replies

  • 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

    Friday, December 4, 2015 5:27 PM
  • 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.


    Monday, September 28, 2020 7:11 AM