Kendo-React-PDF PDF Export not displaying image from S3 bucket: “No 'Access-Control-Allow-Origin' header is present on the requested resource”

Edits before bounty: Here is a screenshot of the error I am receiving in my chrome devtools console:

Here is the exact CORS configuration that I am currently using for my S3 bucket cbbteamlogos:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

My S3 bucket policy is blank, and I'm not quite sure what to add here, despite the suggestion in the comments below to add a bucket policy.

Here is the Kendo React PDF docs that I have been using to implement this, and here is a part of the docs that talks about limitations with drawing images using Kendo.

Having images from this S3 bucket display in my downloaded React PDFs is very important, as I have been building out this PDF generation component for the last week with the assumption that i would get this resolved.

Please let me know if i can share any other output from my app, info on my S3 bucket, etc. that will help resolve this issue!

Original Post:

I am attempting to create a PDF generation tool in my React application, and I am using Kendo React PDF for this. However, I am struggling to have images display in the downloaded PDFs. Apologies in advance that this isn't a reproducible example, but the question is high-ish level and I'm not sure a reproducible example would help anyway.

Here is what the PDF is supposed to look like.

... and here is what it actually looks like when the PDF is exported...

The issue is that the Stanford logo is not appearing in the downloaded PDF, and I'm not quite sure why. I have been reading the Kendo docs, and it mentions here that images are only exported if the server provides permissive Cross-Origin HTTP headers.

The team logos is saved to an S3 bucket of mine (updated CORS configuration above in edits), however the CORS configuration doesn't seem to be helping. Does anybody else with experience using Kendo-React-PDF have any suggestions on how to get the image to show in the downloaded PDF? I'm not quite sure what else to do to resolve the errors.

Thanks!

Edit: https://c2.staticflickr.com/2/1574/25734996011_637430f5d8_c.jpg this is the source of the landscape image that is properly exporting into the PDF, and https://s3.amazonaws.com/cbbteamlogos/STAN-logo.png is the link to the Stanford logo that is not exporting to the PDF.

Edit4: Error message:

Access to image at 'https://s3.amazonaws.com/cbbteamlogos/STAN-logo.png' from origin 'https://cbbanalytics.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here is a very large (how do I make this smaller?…) image of some info for the S3 bucket that holds the image. I've also updated the post above with the current CORS configuration, which is not working. Do I need a bucket policy for this? Is there any other info on the s3 bucket I can share to help with this?

In order get cross-origin headers back from S3, it seems you need to add the following attribute

crossorigin="anonymous"

to your image tag. I found this buried in an answer at this SO Question which is similar to yours.

So, in your standford logo image tag - you need to add the attribute:

crossorigin="anonymous"

In other words, if before, your img tag was:

<img src="https://s3.amazonaws.com/cbbteamlogos/STAN-logo.png" />

then change it to:

<img src="https://s3.amazonaws.com/cbbteamlogos/STAN-logo.png" crossorigin="anonymous" />

---

Proof

I wrote a small index.html and linked in your standford logo without the crossorigin attribute and got the following headers back:

after adding the crossorigin attribute to the standford logo image tag, I got the following:

Hope this helps.