PDF.JS Cross Domain

Question

我正在尝试使用PDF.JS以便在浏览器中呈现用户的PDF。

我们将PDF文件存储在Azure Blob存储中，并且具有CORS和SAS，以允许我们的前端直接与Blob交互以进行上传/下载。

我已经用Chrome，Firefox和Safari测试了我们的设置，Chrome是唯一无法检索文件的浏览器。我收到的错误与不安全的标头有关，我知道下面的异常是由于无法读取Content-Range标头而导致的。

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]

来自 Azure 的响应标头如下所示：

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

这是我们对 Blob 存储的设置

谁能帮我弄清楚我需要向 Azure Blob 存储提供哪些其他配置才能使其在 Chrome 中正常工作？

Answer 1

设置此规则，处理同一问题

<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

所以这有点PEBKAC。我会把我的设置留在这里给其他任何人。我们有一个应用程序正在运行，每次我们new blob 服务类时都会设置ExposedHeaders=*和AllowedHeaders=*。因此，每次我进入我们的门户更新配置时，应用程序都会跟在我之后并将其更改回来。

有效的设置如下：

{
    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,
            },
        ],
    },
}

感谢@async5的帮助。