Error when trying to download file with react-pdf


#1

When trying to show a file using the react-pdf package i am thrown the error: Refused to get unsafe header “Accept-Ranges”

The issue seems to be this line in the pdf.js library:

if (fullRequestXhr.getResponseHeader('Accept-Ranges') !== 'bytes') {
  return false;
}

Is there anyway to work around this?


#2

Most reccomendations to fix this issue on the pdfjs github pages involve updating the CORS configuration. Is this possible?


#3

Hi pbandjs

It is not possible for you to change the cors header configuration, but if this is a broadly applicable solution, we can apply it for all Graphcool users.

For reference: https://github.com/mozilla/pdf.js/issues/3150

Please open an issue in https://github.com/graphcool/api-bugs/issues and reference this post.

Thanks!


#4

Changing CORS headers may not be necessary after all.

The unsafe header error occurs when trying to render a file via a remote url string in pdfjs (im not quite sure how pdfjs gets the file ). A simple workaround is to fetch the file and convert it to a base64 string which is then passed to pdfjs.

let reader=new window.FileReader()
fetch(url)
   .then(response => response.blob())
   .then(blob => {
     reader.readAsDataURL(blob)
     reader.onloadend=() => {
          base64string=reader.result //Passed to pdfjs
      }
   })

#5

That’s smart. Thanks for sharing the solution!