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

4 Answers 4

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.

2
  • Content-Length is unnecessary, it is automatically exposed Feb 15, 2015 at 17:17
  • 2
    I've tried this configuration and many similar configurations without luck in Webkit. Safari & Chrome still want to throw the unsafe "Accept-Ranges" error.
    – BradGreens
    Apr 30, 2015 at 22:04
9

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);
1
  • 1
    Thanks this saved me a lot of time! Jan 23, 2017 at 18:15
3

You need to set

Access-Control-Allow-Headers : Accept-Ranges
2
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.