CORS error using professional OWM tile server

For our app, we have been using open weather map to show weather tiles on the Earth using the createOpenStreetMapImageryProvider with URL{layer}/{z}/{x}/{y}.png?appid={api_key}, and this was working fine. We recently upgraded to the professional edition of the API, and are trying to use the other tile server which is{layer}/{z}/{x}/{y}.png?appid={api_key}. It works on our leaflet app, but for cesium, we are getting this error:

Access to Image at '{API_KEY}' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

We can access the image in the browser, so I'm not sure what the problem is

WebGL requires cross-origin images to have proper CORS headers. This is a browser security requirement that does not apply to other mechanisms for loading images.

If you have a paid account, I would suggest contacting the OpenWeatherMap support team and ask them to enable proper CORS headers. Otherwise, you could set up a server-side reverse proxy on your server that makes it appear to the browser as if the images were loaded from your domain.

Is there anyway you can provide a code snippet of your original usage of the free service? It looks like I am only getting a single tile returned. Thanks for the help!

var imageryLayers = viewer.imageryLayers;
imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    url : 'http://{s}{z}/{x}/{y}.png?appid={api_key}',
    layer : 'Clouds',
    style : 'default',
    format : 'image/png',
    tileMatrixSetID : 'a',
    maximumLevel: 18

It ended up being a CORS error with the OWM people; I contacted them and they fixed it as of this morning.

Michael, I have been using the createOpenStreetMapImageryProvider for the OWM tiles, and it adds the {z}{x}{y} by default, so you have to put your API key in the fileExtension property.