React-pdf: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[rakeshbijoriyagate6]

Describe the bug
Using this component to generate pdfs in the react Project. But having an issue with Image when I am using images from cloudfront.net images are not showing in generated pdfs. when I console it is showing "Access to XMLHttpRequest at 'http://dgzr31xopt5l5.cloudfront.net/profile_pics/FnB7YJOtWsVyvHN8dKEyvbNmV9V21570438881789.png' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." this error.

To Reproduce
To generate same issue use below code in MyDocument.js component.
" <Image style={{ width: 100, height: 100, borderRadius: 50 }} src='https://dgzr31xopt5l5.cloudfront.net/profile_pics/FnB7YJOtWsVyvHN8dKEyvbNmV9V21570438881789.png' cache="false" crossOrigin="anonymous" allowDangerousPaths="true" />"

Please provide some solution to this issue as soon as possible.

[cworf]

Im curious about this issue as well. having the same problem.

[chadwilken]

It looks like you need to change how the internal fetch execution is performed. If we can pass along options to fetch, I could get it to work using fetch(url, { cache: 'reload' }). An alternative method (depending on your CloudFront config) is to append some random value to the URL as a query string and it will break the cache.

[chadwilken]

Found an even better way:

<Image
  source={{
    uri: imageUrl,
    headers: { Pragma: 'no-cache', 'Cache-Control': 'no-cache' },
  }}
/>

Those headers will force the browser to check the server to see if the content has changed and then skips the cache.

[hyun-park]

I'm getting images from AWS S3.

<Image
  src={ imageUrl + `?noCache=` + randomString }
  source={{
    header: {
       'Access-Control-Allow-Origin': '*'
    }
  }}
/>

This works for me. ?noCache query string and randomString can be whatever you want.

[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()}
/>

[danielbyun]

@primordius @hyun-park

Are your S3 buckets public?
My S3 buckets that contain the images are private, so when I follow you guys' instructions I get the 403 (Forbidden) error with Not valid image extension error.

[chadwilken]

@danielbyun unless you’re using a pre-signed URL you will more than likely have to handle requesting the image manually and then passing the data. If you are using a pre-signed URL then I imagine it should just work as long as all of the params and headers match what youUsed when you generated the URL.

[danielbyun]

Hi @chadwilken,

Thank you for your response.
The images are being fetched and processed with the pre-signed URLs on the backend and the frontend is just receiving the URL.

When I console.log() and click the S3 image link URL, it automatically downloads, which I think means the images are accessible and viewable.

Are there any other necessary steps I need to take in order to render the images?
In any other component in this project, I have no problem rendering the images except in this package.

I've tried doing this to no avail.
<Image source={{ uri: {imageURL}, method: "get", headers:{ "Access-Control-Allow-Origin": "*", crossOrigin: "anonymous" } }} cache={false} allowDangerousPaths={true}></Image>

Thanks for your help.

[chadwilken]

@danielbyun to the best of my knowledge the request has to match exactly what you use when you generate the presigned URL. I would open up the network inspector and see what headers are being sent when the image is requested by React PDF and then try adding that to your presigned URL. If you want to debug it without going through React PDF you can use the console and execute the same code that React PDF does by initing an image, setting the src, etc. You can use this file for reference on what it is doing (just select whatever version you're using obviously).

[danielbyun]

@chadwilken

Upon carefully inspecting the network tab, the S3 pre-signed URL is returning a Content-Type of application/octet-stream inside Response Headers.

Can I convert this into an image file with an extension of .jpg or .png or do I need to change the Content-Type inside the pre-signed URL to be an image file before sending it to the client?

[chadwilken]

You probably need to change the content type header.

[AbdulAhad125]

@chadwilken i am facing same error i tried all the above things you or other mention nothing works but when i added
style={styles.image}
source={{ uri: https://cors-anywhere.herokuapp.com/${companyLogo}}}
/> . It works
Can you please help me in acheiveing a more clear way.

[chadwilken]

@AbdulAhad125 I don't really have enough info here to debug anything. I suggest looking at the source code to see how it works internally.