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

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.

[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.

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