Cors error adding UrlTemplateImageryProvider layer


Hi, I tried to add a layer in this way:

let shipxyLayerProvider = new UrlTemplateImageryProvider({

        url: 'http://m12.shipxy.com/tile.c?l=Na&m=o&x={x}&y={y}&z={z}',

        tilingScheme: new WebMercatorTilingScheme()

});

let shipxyLayer = this.viewer.imageryLayers.addImageryProvider(shipxyLayerProvider);

and I encountered error as this pic shows, i tried to add this layer in openlayers, the same url,while openlayers doesn’t show me those cors errors, can anyone help me? thks!

CORS is the security model used by browsers, checking that your URL location (localhost) is allowed to read other URLs (shipxy.com). Looks like shipxy.com has defined CORS rules in place (you’ll find these in the header of the request response), so you might only be able to load tiles from a known domain. Some don’t have strict rules (like openstreetmap) and can more easily be accessed from localhost (your machine).

I’d check with shipxy.com for their CORS policy. Sometime you can register your IP address for access, or, if you know what server it will eventually host on, register that. The rules are with them, so get ahold of them.

Cheers,

Alex

Alex,thanks for your reply, you are right, I just contacted the server company, they said I should request tiles with a key,which had been offered to us, so I will try with that key later.
But it just puzzles me why openlayers doesn’t report any cors error(I didn’t use that key), while Cesium does.


Thank you again for your patiance.

xiao

Welcome in our Community! You can create a proxy server in nodejs.

//Nodejs with express
app.get('/tile/:l/:m/:x/:y/:z', function (req, res) {
	//Modify request header and fetch data then return it back to the request
	let fetched_url = `http://m12.shipxy.com/tile.c?l=${req.params['x']}&m=${req.params['m']}&x=${req.params['x']}&y=${req.params['y']}&z=${req.params['z']}`
	return res.status(200).send(fetched_data_here);
}
// access tiles from localserver
let shipxyLayerProvider = new UrlTemplateImageryProvider({

 url: 'http://localhost:2020/tile/Na/o/0/1/2',

 tilingScheme: new WebMercatorTilingScheme()
});

You can modify request headers inside your nodejs local server. I’m not sure if it will really work But you may give it a try.

Regards,

I’am not quite familar with nodejs, I have nver used nodejs in fact, maybe your solution is right, because single tile can be requested without any error: tile.c (256×256) (shipxy.com)
Any way , I will ask someone who knows nodejs for help.

thanks!

xiao