11 Answers, 1 is accepted
Images can be exported only if the browser is able to load them during exporting via Ajax, or if CORS is allowed (which usually isn't). The following documentation section explains this:
In this particular case, the web server, which hosts the image, does not allow cross-domain Ajax requests and you will see an error in the browser console during export:
Image from origin 'https://static.pexels.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://runner.telerik.io' is therefore not allowed access.
Telerik by Progress
The Open Street Map tiles come with CORS headers and I am able to successfully export them to PDF. Are you using the HTTPS protocol in your Map definition?
Here is a runnable example for your reference:
It looks like the map style that I am using does not allow CORS. The urlTemplate for the map I am using is: https://tiles.wmflabs.org/bw-mapnik/#= zoom #/#= x #/#= y #.png
This works when I load the page but not when I try to export the map to PDF.
The OpenStreetMap data is free but their tile servers are not according to the information I found online and you should get familiar with their policy and license here:
It looks like you can create and host your own proxy with the tiles which will give you the option to provide the CORS headers that are necessary to embed the tiles in the PDF documents.
Fonts and images that are hosted on different domains are exported/embedded only if the server provides permissive Cross-Origin HTTP Headers. The error that you are observing is informing that the CORS headers are not configured for this domain. To get around this, you should correctly configure CORS in Azure. Refer to the following resource for additional information:
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hi @Dimitar, thanks for the reply. I'm afraid I am still unable to get past this. Azure has actually made it much simpler to set CORS rules on a blob - and I have done this; however I am still getting a cors error when the pdf exporter attempts to download the pictures.
Please see Azure-Cors.png for the rules I have added to our storage account.
I have also enabled cors in our .net core 5 app per microsoft msdn article.
I would suggest to check if the Azure service has been restarted and the expected headers are present when images are being downloaded. It might be the case that new changes have not been synced.
Could you also confirm if you are still receiving the CORS error from Azure in the browser with the new configuration that you have applied ? If this is the case, then this means that the headers are not configured correctly.
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.