PDF.JS Cross Domain - cross-domain

Question

I am attempting to use PDF.JS in order to render user's PDFs in the browser.
We store the PDF files in Azure Blob Storage and we have CORS & SAS to allow our front-end to interact directly with Blob for upload/download.
I have tested our setup with Chrome, Firefox, and Safari, and Chrome is the only browser to fail retrieving the file. The errors I get are related to unsafe headers, the exception below I know results from the inability to read the Content-Range header.
Refused to get unsafe header "Content-Encoding"
Refused to get unsafe header "Content-Range"
Uncaught TypeError: Cannot read property '1' of null
at NetworkManager_onStateChange [as onStateChange]
The response headers from Azure look like:
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Accept-Ranges,Content-Range,Content-Encoding,Content-Length
Cache-Control: max-age=1209600
Content-Disposition: attachment; filename=tracemonkey.pdf
Content-Length: 65536
Content-Range: bytes 0-65535/1016315
Content-Type: application/pdf
Date: Tue, 09 May 2017 15:31:33 GMT
Etag: "0x8D49632DD6406EC"
Last-Modified: Mon, 08 May 2017 16:54:17 GMT
Server: Windows-Azure-Blob/1.0 Microsoft-HTTPAPI/2.0
x-ms-blob-type: BlockBlob
x-ms-lease-state: available
x-ms-lease-status: unlocked
x-ms-request-id: 56258985-0001-0062-15d9-c8130c000000
x-ms-server-encrypted: false
x-ms-version: 2015-12-11
This is our setup for Blob Storage
Can anyone help me figure out what additional configuration I need to provide to Azure Blob Storage to get this working in Chrome?

Answer 1

set this rules,working on same issue
<Cors>
<CorsRule>
<AllowedOrigins>http://www.contoso.com, http://www.fabrikam.com</AllowedOrigins>
<AllowedMethods>PUT,GET,POST</AllowedMethods>
<AllowedHeaders>x-ms-meta-abc,x-ms-meta-data*,x-ms-meta-target*</AllowedHeaders>
<ExposedHeaders>x-ms-meta-customheader,x-ms-meta-data*</ExposedHeaders>
<MaxAgeInSeconds>200</MaxAgeInSeconds>
</CorsRule>
<Cors>

Answer 2

So this was a bit of PEBKAC. I will leave my settings here for anyone else that comes along. We had an application running that set ExposedHeaders=* and AllowedHeaders=* every time we would new our blob service class. So, every time I went into our portal to update the configs, the app would come in after me and change it back.
The settings that work are as follows:
{
Cors: {
CorsRule: [
{
AllowedOrigins: [‘*’],
AllowedMethods: [‘GET’, ‘PUT’, ‘DELETE’],
AllowedHeaders: [‘Accept-Ranges’, ‘Content-Encoding’, ‘Content-Length’, ‘Content-Type’, ‘Range’, ‘Authorization’,'x-ms-blob-content-type', 'x-ms-blob-type', 'x-ms-version'], // x-ms headers for upload
ExposedHeaders: [‘Accept-Ranges’, ‘Content-Range’, ‘Content-Encoding’, ‘Content-Length’, ‘Content-Type’],
MaxAgeInSeconds: Constants.timeout,
},
],
},
}
Thanks #async5 for the help.