0

I am trying to load an image from s3 onto a pdf, using a library called react-pdf. This is the same image I display on my site, and that works just fine when using the url on the src of an image element. However, it fails when loading from the specific image component that react-pdf needs to use.

I get this:

enter image description here

The CORS Policy for the S3 bucket is this:

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

I have tried to fetch it with an http request, with all sorts of access-control headers, with the new Image() API, where on load, I convert it to a canvas. None of it seems to work. Can someone explain to me how CORS operates in this scenario, where an image can be loaded through element, but not through an http request? And any possible solutions would be amazing. Thank you!

Brandon Thaler
  • 11
  • 2
  • Looks like your CORS policy is allowing http://localhost:3000. But the network error is reporting some https://stg.tf-suite.com. Can you see it? – MarkSkayff Oct 13 '20 at 19:54
  • Have you tried setting `https://stg.tf-suite.com` in your CORS policy? That's the origin of your site. – DylanSp Oct 13 '20 at 19:55
  • Hi @DylanSp have the same CORS policy for https://stg.tf-suite.com . I thought I had uploaded the error from my local host, which is why I only showed that portion. – Brandon Thaler Oct 14 '20 at 16:35

0 Answers0