PDF.JS跨域

我試圖使用PDF.JS爲了在瀏覽器中呈現用戶的PDF文件。PDF.JS跨域

我們將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

This is our setup for Blob Storage

任何人都可以幫我弄清楚我需要爲Azure Blob存儲提供哪些額外的配置才能在中工作Chrome？

來源

2017-05-09 Andrew Shapro

是否HTTP範圍請求只XHR的工作？嘗試使用「範圍：字節= 0-65535」標題和responseType ='arraybuffer'; （一旦這個工作，那麼挖掘到PDF.js是有道理的） – async5

@ async5這個工程在鉻 https://jsbin.com/nopuzineno/1/edit?js,console –

（對我來說失敗的403），但可以你也嘗試在網絡工作者？ – async5

所以這是一個PEBKAC。我將把我的設置留給任何其他人。我們有一個應用程序運行該集ExposedHeaders=*和AllowedHeaders=*每次我們將new我們的BLOB服務類。所以，每當我進入我們的門戶網站來更新配置時，應用程序都會在我之後進入並將其改回。是

這項工作的設置如下：

{ 
    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的幫助。

來源

2017-05-10 20:12:17

這一套規則，對同一問題的工作

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

來源

2018-01-10 14:22:04

回答

相關問題