react-pdf: Fetching image using react-pdf causes CORS issue, whearas it loads fine in React

Describe the bug When i load an image to render it in a PDF using react-pdf <Image> tag i get a CORS error on my browser, while this works fine while loading the image in a React component using the <img> tags.

Request Headers when loading through react-pdf <Image> tag that fails:

GET /Images/Growthstage/HR/wheat_bbch_51.png HTTP/1.1 Host: x-df-basf-filestorage-masterdata-prod.s3.eu-central-1.amazonaws.com Connection: keep-alive Pragma: no-cache Cache-Control: no-cache sec-ch-ua: " Not A;Brand";v=“99”, “Chromium”;v=“90”, “Google Chrome”;v=“90” sec-ch-ua-mobile: ?0 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36 Accept: / Origin: https://xac-dev.xarvio.com Sec-Fetch-Site: cross-site Sec-Fetch-Mode: cors Sec-Fetch-Dest: empty Referer: https://xac-dev.xarvio.com/ Accept-Encoding: gzip, deflate, br Accept-Language: en,en-US;q=0.9

Error message : Access to XMLHttpRequest at ‘https://x-df-basf-filestorage-masterdata-prod.s3.eu-central-1.amazonaws.com/Images/Growthstage/LR/barley_bbch_59.png’ from origin ‘https://xac-dev.xarvio.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Request Headers when loading through React component <img> tag:

GET /Images/Growthstage/HR/rye_bbch_31.png HTTP/1.1 Host: x-df-basf-filestorage-masterdata-prod.s3.eu-central-1.amazonaws.com Connection: keep-alive Pragma: no-cache Cache-Control: no-cache sec-ch-ua: " Not A;Brand";v=“99”, “Chromium”;v=“90”, “Google Chrome”;v=“90” sec-ch-ua-mobile: ?0 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36 Accept: image/avif,image/webp,image/apng,image/svg+xml,image/,/*;q=0.8 Sec-Fetch-Site: cross-site Sec-Fetch-Mode: no-cors Sec-Fetch-Dest: image Referer: https://xac-dev.xarvio.com/ Accept-Encoding: gzip, deflate, br Accept-Language: en,en-US;q=0.9

Expected behavior: The image should load the same way using both the methods.

Desktop (please complete the following information):

  • OS: [Windows]
  • Browser [chrome]
  • React-pdf version [e.g. v1.6.13]

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 15 (1 by maintainers)

Most upvoted comments

I had just one doubt , hope someone can spare some time to explain , but how come loading the image in the <img> tag in a react component is not causing any CORS issue, i really want to understand how this is working. Like i am seeing two get request in my network tab , one is able to get the image and the other cant with a CORS error.

react-pdf download the image binary with fetch API to embed it to pdf and fetch follows same-origin policy. react propagate the image src to the browser and the browser downloads image without any cors check.

that’s the difference

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

thank you that make me understand how cors work, in my case i am fix with #929 by add <Image src={{ uri: _your_image_url_goes_here_, method: "GET", headers: { "Cache-Control": "no-cache" }, body: "" }} />

I would also really like to know and understan why an <img> works fine but the Image is giving me trouble.

@the5ereneRebe1 @reinvanimschoot Same question here

@diegomura can we get an answer? It seems there is something you can be doing on your side given this disparity