PDF.js CORS issue for S3 file

Question

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.com/pdfjs-helloworld-v2/7086/edit

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

My S3 CORS Setup:

S3 PDF for testing: http://sheethub.s3.amazonaws.com/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.com and http://s3.amazonaws.com/sheethub ?

Answer 1

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.

Answer 2

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;