React-pdf: Unable to load file from aws s3 pre signed URL

[omitewary]

Hello Wojciech Maj,

I have gone through existing issues related to CORS. The domain I am requesting to has enabled CORS and has GET as well as POST in allowed method. I am still getting following error.

Now, here is what I am doing. I am basically fetching pre signed URL from aws s3 and then using this url in file props of Document.

In my network tab I see that in pre flight request allowed method is POST. However pdf.js uses GET to load PDF.

As you can see Access-Control-Request-Method: POST .
I tried sending httpHeader in file props as

<Document file= {{ url: 'URL',httpHeaders: {'Access-Control-Request-Method': 'GET', 
"Access- 
Control-Allow-Origin": "*"}, withCredentials: true }}
 onLoadSuccess={this.onDocumentLoadSuccess}
renderMode="canvas">
</Document>

But if I send like this then I am not seeing any pre flight request in network tab and CORS issue persist.

Thank you in advance!

[gabrielnoal]

I had the same issue.
I solved using html iframe tag instead of using react-pdf.

<iframe style={{ <add your style here> }} src={'https://s3-sa-east-1.amazonaws.com/......'}/>

[pat-schoeps]

We're having the same issue, the service worker and library initialize correctly but fail to load resources from a presigned url. These files can otherwise be loaded successfully.

[MariuszKogut]

We came across this issue, using Azure BlobStorage and shared access signature.

[danpan1]

Solved the problem by changing CORS policy in s3 bucket https://docs.aws.amazon.com/AmazonS3/latest/user-guide/add-cors-configuration.html
CORS policy should be

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

[frankyjuang]

Looks like the same as https://github.com/wojtekmaj/react-pdf/issues/370
Adding CORS policy to s3 bucket works. Thanks @danpan1

[jonahallibone]

For anyone here having this issue still, even with the correct CORS policy, we used the source option on the Image component to construct this:

<Image source={{ uri: logo, method: "GET", headers: { "Cache-Control": "no-cache" } }} />