React-pdf: Images are not rendered due to CORS issue

[roshangm1]

Describe the bug
I am not being able to load some of the images (specially images with large dimensions).
Even this image doesn't work.
https://via.placeholder.com/720x400.png

<Image
       style={styles.image}
        src="https://via.placeholder.com/720x400.png"
      />

To Reproduce
Steps to reproduce the behavior including code snippet (if applies):

1. Go to 'https://react-pdf.org/repl'
2. Replace the local image with the remote link -> https://via.placeholder.com/720x400.png
3. Notice that you won't be able to see image.
4. However, when you use CORS addons like CORS Everywhere, the image shows up.

_You can make use of react-pdf REPL to share the snippet_

Expected behavior
We should be able see the remote image rendered in PDF.

Desktop (please complete the following information):

• OS: [MacOS]
• Browser [chrome, safari, firefox]
• React-pdf version latest

[llmdev]

I'm having the same problem in production, I'm asking the devops staff to enable origin cors on the server from anywhere, if that resovler warns you, otherwise I'll look for a solution too. I read something about canvas image and you can add headers

[llmdev]

<Image
  src={ imageUrl }
  source={{
    header: {
       'Access-Control-Allow-Origin': '*'
    }
  }}
/>

maybe that helps

[roshangm1]

I don't know. That image seems perfect for any other cases but not working on react-pdf/renderer. Seems like impossible to handle this from server. Anything that we can do from frontend for response headers such like those addons do ?

[llmdev]

This solution of putting the header in the source did not work, did you have any other solution there or do some test?

[sauzy34]

<Image
  src={imageSource + '?noCache=' + Math.random().toString()}
  source={{
    header: {
      'Access-Control-Allow-Origin': '*'
    }
  }}
/>

This worked for me ❤️

This solution of putting the header in the source did not work, did you have any other solution there or do some test?

[roshangm1]

<Image
  src={imageSource + '?noCache=' + Math.random().toString()}
  source={{
    header: {
      'Access-Control-Allow-Origin': '*'
    }
  }}
/>

This worked for me ❤️

This solution of putting the header in the source did not work, did you have any other solution there or do some test?

Not working for me still!

[llmdev]

@roshangm1 I asked my backend to create a proxy on my api for those with heart problems, maybe that will help you too

[djedd]

<Image
  src={imageSource + '?noCache=' + Math.random().toString()}
  source={{
    header: {
      'Access-Control-Allow-Origin': '*'
    }
  }}
/>

This worked for me ❤️

This solution of putting the header in the source did not work, did you have any other solution there or do some test?

Not working for me still!

@roshangm1, are you try to do without protocol, i mean, instead of https://via.placeholder.com/720x400.png, use: //via.placeholder.com/720x400.png, this solve some problems for CORS, you should also keep in mind that the site has the possibility of supporting the different types of ssl and non-ssl.

[primordius]

If you are using AWS S3, make sure your bucket has a proper Cross-origin resource sharing and you are setting the random query string mentioned above
https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors
Example CORS policy:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

Document:

<Image
  src={imageSource + '?noCache=' + Math.random().toString()}
/>

[diegomura]

There's nothing else on react-pdf side that can be done for CORS rather than adding the correct headers. Closing this

[mathew3]

<Image
  src={imageSource + '?noCache=' + Math.random().toString()}
  source={{
    header: {
      'Access-Control-Allow-Origin': '*'
    }
  }}
/>

same issue here and the solution from @sauzy34 worked like a charm, thanks!