Refused to get unsafe header "Accept-Ranges" error from pdf.js with amazon urls

Question

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

Answer 1

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.

Answer 2

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);