Fetching image using react-pdf <Image> causes CORS issue, whearas it loads fine in React <img>

See original GitHub issue

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]

Issue Analytics

State:
Created 2 years ago
Comments:8 (1 by maintainers)

Top GitHub Comments

7reactions

the5ereneRebe1commented, Apr 26, 2021

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.

5reactions

jeetisscommented, Jan 31, 2022

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

Top Results From Across the Web

Fix CORS issue on react-pdf

Yes, I have image file which is loading from my domain itself, API call is working fine but when I want to load...

Cross-origin Errors

To resolve this, use the crossOriginLoading setting in development to add the crossorigin attribute to the <script> tags generated for the JSONP requests....

Fix CORS Error [SOLVED] | React Tutorial - YouTube

This video tutorial, I will demonstrate to you how to solve the CORS issue in ReactJS. GitHub Pages URLhttps://lyhd.github.io/ reactjs /GitHub ...

Build File Upload/Download Functionality with Image ...

Introduction. In this article, we will create a file upload and download functionality with a preview of the image using the MERN stack....

Authoritative guide to CORS (Cross-Origin Resource ...

There are legitimate reasons for a website to make cross-origin HTTP requests. Maybe a single-page app at https ...