Cors error adding UrlTemplateImageryProvider layer

CesiumJS
1

image
image1300×500 49 KB

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!

2

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

3

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.

image
image1920×1010 177 KB

image
image1920×973 108 KB

Thank you again for your patiance.

xiao

4

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,

5

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

6

Thank you everyone, my colleague finally solved it, by adding dev server configuration in webpack.

proxy: {

          "/shipxy": {

              target: "http://m12.shipxy.com", // 要访问的服务端接口域名

              ws: true, // 是否启用websockets

              changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题

              // pathRewrite: {

              //     "^/localhost": "" //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add'，直接写'/api/user/add'即可

              // }

          }

      }

and when you request the map, replace it with ‘/shipxy/tile.c?l=Na&m=o&x={x}&y={y}&z={z}’ , done!

Thank you for all, for helping me!
BaoXiao