React-pdf: "Failed to load PDF file." when using a URL.

[theHasanas]

Hello Wojciech Maj,

I have an issue trying to load PDFs from a URL.
I am using latest version react-pdf, with the latest version of create-react-app.

Console output: XMLHttpRequest cannot load "http://example.com/sample.pdf" due to access control checks.

Thank you in advance!

[wojtekmaj]

Hey,
is that URL in the same origin as your app? If not, you're yet another victim of Same-origin policy. In this case, you would need to either copy PDF on your server or build a simple proxy to pass the file through your server. If your app has to display one specific PDF you can also include it via Webpack in your bundle (I'm doing that on test suite).

[theHasanas]

You're indeed right. I am retrieving the URLs from Firebase Storage.

I am a web development newbie; could you please link to a guide on how I could setup a proxy with create-react-app that would serve this purpose? Also, does it matter that I am using Firebase, or would any guide on connecting to an API _(for example)_ suffice?

Out of curiosity, why are images exempt from this policy?

Thank you for the quick reply 👍

[wojtekmaj]

Hey,
you won't be able to do it on front-end side. You will need a proxy in Node or PHP or something similar. That's completely not connected to the app you're building :(

It doesn't matter which server you're connecting to. Basically, as long as it's not yours, you will have a problem.

[saman]

You can run a server with cors-anywhere.

Or simply use

https://cors-anywhere.herokuapp.com/http://any-url.com/any-file.pdf

[theHasanas]

Ahh, I was just an idiot. I thought Node was unhappy with the file, but it was Firebase. I just followed the documentation by Google.

Thank you anyway!