I can load an image from S3 through an image tag, but not a fetch request?

Question

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:

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!