none
Cross-origin image load denied by Cross-Origin Resource Sharing policy error

    Question

  • I know this is more of an openlayers question but it's focusing on the direct tile access through Bing Maps REST Services which is where (I believe) the issue I'm encountering to be.

    The example at http://openlayers.org/dev/examples/bing.html has suddenly stopped working (for me at least), and as my application is using the same API it's now also rendering bad squares on all layers but for when I request the 'Aerial' type.

    Has something changed with the Bing Maps REST Service in the last 2 months that would have caused this? Or is this just a glitch? Currently the example is rendering pink squares and producing a 'Cross-origin image load denied by Cross-Origin Resource Sharing policy.' error in the console.

    I'm just wondering what could have caused this...

    Thanks for your help!


    • Edited by darren_cro Tuesday, January 21, 2014 12:15 PM misleading title
    Tuesday, January 21, 2014 12:14 PM

Answers

All replies

  • Just want to add my interest to this.

    There's definitely a problem. See this GitHub issue: https://github.com/openlayers/ol3/issues/1562

    The domains at ak.dynamic.tX.tiles.virtualearth.net are missing the cross-origin policy header (Access-Control-Allow-Origin)

    Tuesday, January 21, 2014 12:56 PM
  • We are aware of this and it has been escalated for investigation on our side. This is an odd issue as it appears to be limited to certain browsers.

    http://rbrundritt.wordpress.com

    Tuesday, January 21, 2014 1:35 PM
  • This problem still exists. The url in question for me is 

    http://dev.virtualearth.net/REST/v1/Elevation/Bounds?bounds=45.219,-122.234,47.61,-122.07&rows=32&cols=32

    Could somebody please go into IIS and add a filter to set 

    Access-Control-Allow-Origin: *

    Thanks!


    Wednesday, March 12, 2014 10:05 PM
  • hwinkler, the issue you are having is completely separate from this thread. This thread was related to the map tiles having issues during a release. The query you are using works fine and works the same as it did the day it was released and can easily be used in apps. Where are you running into issues? JavaScript, C#, WPF?


    http://rbrundritt.wordpress.com

    Thursday, March 13, 2014 9:15 AM
  • Hi rbrundritt -- the title of the thread is more general than map tiles -- it concerns CORS policy errors. That's why I added my remark.

    We experience the problem in Javascript. Here's the 100% reproducible case. Chrome prints a very nice message to the console:

    XMLHttpRequest cannot load http://dev.virtualearth.net/REST/v1/Elevation/Bounds?bounds=45.219,-122.234…2&cols=32&elided. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

    <!DOCTYPE html> <html> <body> <script> var bingAPIKey='your-key-here';

    var url = 'http://dev.virtualearth.net/REST/v1/Elevation/Bounds?bounds=45.219,-122.234,47.61,-122.07&rows=32&cols=32&key=' + bingAPIKey; function onok () { document.write('<p>OK!</p>'); } function onerr (e) { document.write('<p style="color:red">Error... see console</p>'); throw e; } var oReq = new XMLHttpRequest(); oReq.onload = onok; oReq.onerror = onerr; oReq.open("get", url, true); oReq.send(); </script> </body> </html>




    • Edited by hwinkler Thursday, March 20, 2014 2:31 AM tidy up the api key parameter
    Thursday, March 20, 2014 2:03 AM
  • You have to use JSONP to access this service. This service is easy to access using jQuery, or you can simply include a JSONP callback in the URL like the following code sample.

    <!DOCTYPE html>
    <html>
    	 <body>
    	 	<script>
    	 		var bingAPIKey='YOUR_BING_MAPS_KEY';
    
    			var url = 'http://dev.virtualearth.net/REST/v1/Elevation/Bounds?bounds=45.219,-122.234,47.61,-122.07&rows=32&cols=32&key=' + bingAPIKey;
    
    			function onok (r) {
    			  alert(r.resourceSets[0].resources[0].elevations);
    			}
    
    			function CallRestService(request) 
    			 {
    				var script = document.createElement("script");
    				script.setAttribute("type", "text/javascript");
    				script.setAttribute("src", request);
    				document.body.appendChild(script);
    			 }
    			 
    			 CallRestService(url + '&jsonp=onok');
    		</script>
    	</body>
    </html>


    http://rbrundritt.wordpress.com

    Thursday, March 20, 2014 10:21 AM
  • Yeah, we use jsonp. It's a bug that you don't support CORS. Why don't you guys fix that?

    Thursday, March 20, 2014 1:39 PM
  • I mean, we use CORS for map tiles but not for elevations. Weird.
    Thursday, March 20, 2014 3:53 PM