Background image - No 'Access-Control-Allow-Origin' header is present on the requested resource.

[Aleš]

Hello,

I have an application, where my API is serving data to my front end angular application. I am setting a background image of an element, where the image path is from the API, and I get an error:

Access to fetch at 'https://api-path.com/files/user_logos/id/logo.png' from origin 'https://www.front-end.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

And the image is not showing in the exported PDF.

How can fix this?

Thank you for the information!

[Svet]

Hi Aleš,

Thank you for the provided details.

The demonstrated CORS related error is generic. Please check the following article on CORS for some more details on when such error is thrown:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Basically, each time a web client makes a remote request, then the response should contain the appropriate CORS headers that will allow the client to receive the response from the particular remote server. That implementation is introduced due to security measures.

"...a web application using those APIs can only request resources from the same origin the application was loaded from, unless the response from other origins includes the right CORS headers."

The same error should be thrown if you try to add the image from the remote API somewhere in the DOM.

To sum up, the error should be fixed by adding the required headers to the response that is returned by the server, rather than being a Kendo UI for Angular related issue. Does that make sense? Please let me know in case there is something unclear or if I can provide any additional details on this case. Thank you.

Regards,
Svetlin
Progress Telerik

[Aleš]

Hello Svetlin,

thank you for the reply.

The thing is, it's visible in the DOM. My div has a style background-image (see attachment).

But when I click a button which triggers an export to pdf, i get the error.

Would appreciate the help, best regards!

Aleš

 

[Svet]

Hi Aleš,

Thank you for the provided screenshot.

I checked with the assigned developers. They assured me that the issue can persist even if the image is loaded in the DOM. The image wouldn't be exported by the PDF Export if it doesn't have properly setup Access Control Allow Headers:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

Here is an example demonstrating how the PDF Export successfully exports an image that has the proper response headers configured:

https://stackblitz.com/edit/angular-p3bzud?file=app/app.component.ts

The response headers can be further checked in the Network tab of the browser console.

Thus, the issue should be fixed in the server side controller returning the image. Let me know in case further details are required for this case. Thank you.

Regards,
Svetlin
Progress Telerik

[David]

I have the same issue within .net core BE and Angular FE. After hours spent with CORS. This solved my troubles. 

 

https://www.bytefish.de/blog/aspnetcore_static_files_cors.html

 

Hope it will save someone :-)