15

I'm trying to use pdf.js with range requests (progressive loading of the pdf document) , but when i'm trying to load the pdfs from amazon s3 urls this error appears in the console :

-Refused to get unsafe header "Accept-Ranges"

and the pdf doesn't load via 206 partial content (range requests) but 200 and then viewed in the viewer.

this is an example of pdf url :

https://kotob.s3.amazonaws.com/book.pdf?Signature=irgVfoAZuPPIp5kpCesni2MzpLo%3D&Expires=1366576877&AWSAccessKeyId=AKIAILBHXSTPUIBTRMSA

any help

Mahmoud Felfel
  • 3,051
  • 3
  • 26
  • 19

4 Answers4

17

Setting CORS policy on Amazon like this seems to help.

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

But after I put resources up on CDN this does not work. Anyways it seems a lot faster even with 200 on CDN then with 206 partial download on S3.

drKreso
  • 1,030
  • 10
  • 16
8

Late answer, but with Azure blobs (I know you asked about AWS, but this drove me crazy trying to figure out so answering anyway) you have to set Accept-Ranges specifically as an Allowed Header, just setting it to * doesn't work.

I used the following C# code to do this:

var url = new Uri(String.Format("https://yourblob.blob.core.windows.net"));
var credentials = new StorageCredentials("accountname", "key");
var client = new CloudBlobClient(url, credentials);

var corsRule = new CorsRule();

corsRule.ExposedHeaders.Add("Accept-Ranges");
corsRule.ExposedHeaders.Add("Content-Encoding");
corsRule.ExposedHeaders.Add("Content-Length");
corsRule.ExposedHeaders.Add("Content-Type");

corsRule.AllowedHeaders.Add("Accept-Ranges");
corsRule.AllowedHeaders.Add("Content-Encoding");
corsRule.AllowedHeaders.Add("Content-Length");
corsRule.AllowedHeaders.Add("Content-Type");

var serviceProperties = CloudBlobClient.GetServiceProperties();
serviceProperties.Cors.CorsRules.Clear();
serviceProperties.Cors.CorsRules.Add(corsRule);
client.SetServiceProperties(serviceProperties);
JMK
  • 27,273
  • 52
  • 163
  • 280
3

You need to set

Access-Control-Allow-Headers : Accept-Ranges
topkara
  • 886
  • 9
  • 15
  • This does not seem to be a regular HTTP header field. http://en.wikipedia.org/wiki/List_of_HTTP_header_fields – Nico Schlömer Oct 29 '14 at 11:55
  • "All CORS related headers are prefixed with "Access-Control-"" as per https://www.html5rocks.com/en/tutorials/cors/#toc-handling-a-simple-request – Stevko May 18 '17 at 20:32
0

I too got the same issue. Instead of passing the url directly,I passed the object with url ="url" and withCredentials = true.

Cookie was not getting passed when passing the direct url

chk the below for how to form the object it PDF.JS: Render PDF using an ArrayBuffer or Blob instead of URL

Raphael
  • 1,738
  • 2
  • 27
  • 47