Pdf.js: PDF hosted on Amazon S3 doesn't work

[metallica33]

I am passing the url of the PDF file which is stored on Amazon S3 via CDN. But the PDF is not read in the PDF.js. Here is the url of the PDF http://d25js2ljnosx0i.cloudfront.net/postingother/1682P-yxuc78.pdf

[gigaherz]

Does Amazon S3 have CORS support?

[gigaherz]

It appears it does, and here's a link on how to enable it: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

[marcosps]

I can't reproduce this, since here the pdf is showed :)

I'm using Ubuntu 12.04, Nightly and pdd.js development.

Can you test with pdf.js development version and told us if this solves
your problem?

2013/3/13 David Quintana [email protected]

It appears it does, and here's a link on how to enable it:
http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

—
Reply to this email directly or view it on GitHubhttps://github.com/mozilla/pdf.js/issues/2938#issuecomment-14835046
.

Att,

Marcos Paulo de Souza
Acadêmico de Ciencia da Computação - FURB - SC
Github: https://github.com/marcosps/
"Uma vida sem desafios é uma vida sem razão"
"A life without challenges, is a non reason life"

[gigaherz]

I assumed he's using the viewer on his own website, since he's "passing the url" to something. If he was just trying to load the PDF he would have said he's "linking to the pdf" or similar, I guess.

Either way, I suppose it needs clarification. Are you trying to use a viewer hosted in your website? Or just linking to the PDF?

The extension should be able to load the PDF regardless of origin, but the viewer requires either same-origin, or CORS.

[marcosps]

Ow, understood :)

2013/3/13 David Quintana [email protected]

I assumed he's using the viewer on his own website, since he's "passing
the url" to something. If he was just trying to load the PDF he would have
said he's "linking to the pdf" or similar, I guess.

Either way, I suppose it needs clarification. Are you trying to use a
viewer hosted in your website? Or just linking to the PDF?

The extension should be able to load the PDF regardless of origin, but the
viewer requires either same-origin, or CORS.

—
Reply to this email directly or view it on GitHubhttps://github.com/mozilla/pdf.js/issues/2938#issuecomment-14835438
.

Att,

Marcos Paulo de Souza
Acadêmico de Ciencia da Computação - FURB - SC
Github: https://github.com/marcosps/
"Uma vida sem desafios é uma vida sem razão"
"A life without challenges, is a non reason life"

[metallica33]

Sorry I didn't provide much information of the issue. I am trying to load the pdf on my website using the canvas tag. Ideally this would be a single page pdf that I want to show on my webpage. I used the following code to acheive this.

PDFJS.getDocument('http://d25js2ljnosx0i.cloudfront.net/postingother/1685P-v7ikwh.pdf').then(function(pdf) {
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});

I hope this explains the problem. And also thanks for the tip for enabling the CORS on Amazon S3, I will try to use that.

[yurydelendik]

Still an issue? If yes, provide url to the web page (jsbin or jsfiddle) that contains the code above.

[timvandermeij]

No response, therefore closing this. Please open a new issue if there are still problems.

[andyweiss1982]

Does anyone have an example of an S3 bucket CORS policy that works? I've tried several to no avail. Currently trying:

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

[mull]

@andyweiss1982 did you end up finding a solution?

[jjoao07]

Hi Guys!

I know this topic is old!

But I'm facing the same problem, while using ionic 3, with ng2-pdf-viewer which is a wrapper of pdf.js

below is cors XML code what I have tried, but no luck so far!
<CORSConfiguration> <CORSRule> <AllowedOrigin>http://localhost:8100</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> <CORSRule> <AllowedOrigin>http://localhost:8100</AllowedOrigin> <AllowedMethod>PUT</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Content-Type</AllowedHeader> <AllowedHeader>x-amz-acl</AllowedHeader> <AllowedHeader>origin</AllowedHeader> </CORSRule> </CORSConfiguration>

And the bug i'm getting is like below the screenshot

Can someone help please!

[aliasgerr]

From what I read on:
https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

How Does Amazon S3 Evaluate the CORS Configuration On a Bucket?

When Amazon S3 receives a preflight request from a browser, it evaluates the CORS configuration for the bucket and uses the first CORSRule rule that matches the incoming browser request to enable a cross-origin request. For a rule to match, the following conditions must be met:

1. The request's Origin header must match an AllowedOrigin element.
2. The request method (for example, GET or PUT) or the Access-Control-Request-Method header in case of a preflight OPTIONS request must be one of the AllowedMethod elements.
3. Every header listed in the request's Access-Control-Request-Headers header on the preflight request must match an AllowedHeader element.

==========
In this case the #1 fails since pdfjs request does not include the 'origin' header and hence S3 does not consider this as a cross domain issue.

A fix for this will be needed in the pdfjs lib.

[GautierT]

Solution 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>

[Dhana-Krishnasamy]

Solution 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>

Which version of pdfjs do you use? this config doesnt help me for version 2.0.943?

[gmimaster1945]

Hi Guys

Anyine help me for this one

[jjoao07]

@gmimaster1945 which platform or framework are you using.

U need to provide more details so that we may help you.

[gmimaster1945]

@jjoao07 Thanks for replying.

I am using codeigniter framework[PHP] + PDF.js

testing the files via amazon aws.

it is working via direct read access gave in public but when i remove the permission i got above attached error.

accessing files via PHP library of aws s3.

i need client side help.

[pipers0123]

I resolved this issue by comment this lines in viewer.js

if (fileOrigin !== viewerOrigin) {
throw new Error('file origin does not match viewer\'s');
}

[N00nDay]

I had an issue with CORS as well. Tries every solution possible and it turned out to be a cache problem. I needed to append a random parameter ${myUrl}?${new Date().getTime()} for example and it resolved my issue.