PDF.JS 크로스 도메인

PDF.JS을 사용하여 브라우저에서 사용자의 PDF를 렌더링하려고합니다.PDF.JS 크로스 도메인

우리는 Azure Blob Storage에 PDF 파일을 저장하고 Google 프론트 엔드가 업로드/다운로드를 위해 Blob과 직접 상호 작용할 수 있도록 CORS & SAS가 있습니다.

크롬, 파이어 폭스 및 사파리로 설정을 테스트했으며 크롬만이 파일 검색에 실패했습니다. 내가 얻는 오류는 안전하지 않은 헤더와 관련이 있습니다. 아래 예외는 Content-Range 헤더를 읽을 수 없다는 결과입니다.

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

0,123,516 : 푸른에서

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 Blob Storage에 제공해야하는 추가 구성이 무엇인지 알아낼 수 있습니까? 크롬?

출처

2017-05-09 Andrew Shapro

하는가는 HTTP 범위 요청 작업? "Range : bytes = 0-65535"헤더와 responseType = 'arraybuffer'로 시도하십시오. (그것이 작동하면 PDF.js를 파헤치는 것이 의미가 있습니다.) – async5

@ async5 이것은 크롬에서 작동합니다 https://jsbin.com/nopuzineno/1/edit?js,console –

(403은 나와 함께 실패 함) 당신은 또한 웹 작업자에서 그것을 시도합니까? – async5

이것은 PEBKAC의 비트입니다. 나는 다른 사람들을 위해 나의 환경을 남겨 둘 것이다. ExposedHeaders=* 및 AllowedHeaders=*을 실행할 때마다 우리는 new 우리의 blob 서비스 클래스를 실행할 응용 프로그램을 가지고있었습니다. 그래서 configs를 업데이트하기 위해 포털에 갈 때마다 앱이 나 후에 들어 와서 다시 변경됩니다. 도움을 async5 @

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

감사를 다음과 같이 작동

설정이 있습니다. 단지 XHR와

출처

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

PDF.JS 크로스 도메인

답변

관련 문제