Problem with CORS and calling BingMaps

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

I am calling “Cesium.loadJson”, in order to reach a virtualearth url…

I understand that if I don’t define a custom header, Cesium will append the default header: headers = {Accept: “application/json,/;q=0.01”}

51

   This sounds to me like a way to communicate with the Bing Maps REST service, which I understand does not support CORS.

   However, I do not get any result...



This is what I get in the console...kinda confusing :)

Failed to load https://dev.virtualearth.net/REST/v1/Locations/36.19241768243102,-108.36173979199924?format=json&key=<MY KEY>: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
HelloWorld.html:44 **Error is Request has failed.**
Cesium.js:489

XHR finished loading: GET "https://dev.virtualearth.net/REST/v1/Locations/36.19241768243102,-108.36173979199924?format=json&key=<MY KEY>".




So did it load or not? Obviously I am not getting any result, so it must have failed...



Am I doing something wrong, or forgetting something? I am not a JS expert, so any advice will be welcome.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

var requestString = ‘https://dev.virtualearth.net/REST/v1/Locations/’ + latitude + ‘,’ + longitude + ‘?format=json&key=’;

Cesium.loadJson(requestString).then(function(results) {

console.log(results);

}).otherwise(function(error) {

console.log('Error is ’ + error);

});

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I am writing a reverse geocoder, using Bing Maps.

I am sending latitude and longitude, and expecting a JSON result. This works fine, if loaded in https://robwu.nl/cors-anywhere.html for demonstration purposes.

4. The Cesium version you’re using, your operating system and browser.

Cesium 1.38 on Mac, with Chrome.

2

You’re right that Bing Maps services do not work with cross-origin requests, so you’ll need to use a technique called JSONP.

However, accessing Bing Maps doesn’t really depend on Cesium in any way, so you can find plenty of documentation online about how to use Bing from JavaScript directly.

For example - https://blogs.bing.com/maps/2015/03/05/accessing-the-bing-maps-rest-services-from-various-javascript-frameworks

(Cesium has a function loadJsonp but you might find it easy enough to code it yourself after reading the blog post above).

3

Thank you so much Scott, it now works!!
I opted for using the method recommended in the blog.

This is awesome, thank you for your help :slight_smile:

Martine