I'm trying to view a PDF hosted on an S3 Bucket using PDF.js 1.0.571. However, I'm getting the following error:

Working JSBin from a similar issue:

Not Working JSBin:

My S3 CORS Setup:

S3 PDF for testing: .pdf?1407157315

Is my CORS setup wrong? What am I missing here? Is there a difference between and ?

I'm trying to view a PDF hosted on an S3 Bucket using PDF.js 1.0.571. However, I'm getting the following error:

Working JSBin from a similar issue: http://jsbin./pdfjs-helloworld-v2/7086/edit

Not Working JSBin: http://jsbin./pdfjs-helloworld-v2/10562/edit

My S3 CORS Setup:

S3 PDF for testing: http://sheethub.s3.amazonaws./sheets/0b26b42aa027c6b73855feb68b8c089e893f8114/original/another_guldove.pdf?1407157315

Is my CORS setup wrong? What am I missing here? Is there a difference between http://sheethub.s3.amazonaws. and http://s3.amazonaws./sheethub ?

• javascript
• pdf
• amazon-s3
• cors
• pdf.js

• Did you find the way to do that? I'm experiencing the same problem at the moment! Also, why are you asking for the difference between the two URLs? – lajarre Commented Sep 18, 2014 at 15:12
• Unfortunately, I didn't. It seems there's a difference in how the two URLs behave. – user626511 Commented Mar 9, 2015 at 9:02
• I'm seeing the same issue as well :( – Maurício Linhares Commented Sep 14, 2015 at 17:41

3 Answers 3

Just like me, if someone is spending days on it.

Even after setting cors on s3

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

which is now in array format:

[
   {
      "AllowedHeaders":[
         "*"
      ],
      "AllowedMethods":[
         "HEAD",
         "GET"
      ],
      "AllowedOrigins":[
         "*"
      ]
   }
]

an doesn't works with pdf.js or any javascript code.

Just add one extra parameter with url, eg.

Case-1:
    var url = "https://xxxx.xxx.xxxxx?token=yyy";
    url = url + '&origin='+ window.location.host;

Case-2:
    var url = "https://xxxx.xxx.xxxxx";
    url = url + '?origin='+ window.location.host;

For people still facing this issue and landed here :

Use this config on your S3 CORS configuration. Follow instruction on this link to update your CORS config. Don't forget to save.

<!-- Sample policy -->
<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

<AllowedMethod>HEAD</AllowedMethod> makes the difference.

You need to enable CORS on your server. Its basically done by adding the following headers to the output from your web server:

• Access-Control-Allow-Credentials:true
• Access-Control-Allow-Methods:GET
• Access-Control-Allow-Origin:http://www.yourdomain.

You can read more about a similar case here: http://flexpaper.devaldi./questions-and-answers.jsp?qa=1560/remote-hosted-pdfs-not-being-displayed-stuck-loading