PDF.jsは、FirefoxでCORを有効にしている他のサーバーにあるPDFファイルにリダイレクトしません。 -- javascript フィールド と scala フィールド と spring-mvc フィールド と amazon-s3 フィールド と pdf.js フィールド 関連 問題

PDF.js does not redirect to pdf file located on another server with CORS enabled in Firefox












1
vote

問題

日本語

私は改善する必要があるウェブサイトを手に入れました。このサイトには各ユーザーに固有のPDFファイルが含まれており、PDF.jsライブラリはユーザーがそれらを表示できるようにします。これらのPDFファイルは、 Content-Type: application/pdf を返す httр://website.com/api/client/255/product/90/livePdfPreviewFile のようなリンクごとに自動的に生成され、生成されたファイルはAmazon S3ストレージにキャッシュされます - 同じリンクによる次の呼び出しの後私のサーバーによってAS3からダウンロードされ、再生成する代わりにプレビュー用にクライアントにダウンロードされます。そのように、リンクはpdf.jsスクリプトにget-parameterとして渡されます。

<事前> <コード> httр://website.com//resources/web/viewer.html?file=api%2Fclient%2F255%2Fproduct%2F90%2FlivePdfPreviewFile

とすべてがうまく機能しますが、サーバーのロードを減らし、それらのファイルのゲートウェイとしてマイサーバーを使用するのではなく、Amazon S3ストレージでサーバーの応答を直接リダイレクトしなければなりません。 AmazonS3 APIを使用してCORS設定を設定しました(これは許可されていて露出されたヘッダーなしで簡単な構成ですが、Google Chromeで動作します):

<事前> <コード> val config = new BucketCrossOriginConfiguration() val rules = new java.util.ArrayList[CORSRule]() val bucketCORSRule = new CORSRule().withId(CORS_NAME) .withAllowedOrigins(util.Arrays.asList("*")) .withAllowedMethods(util.Arrays.asList(CORSRule.AllowedMethods.GET)) rules.add(bucketCORSRule) config.setRules(rules) s3Client.setBucketCrossOriginConfiguration(bucketName, config)

その後、Cachedファイルにリダイレクトできるように、PDFファイルをクライアントに返す責任を変更しました。

<事前> <コード> if (isResourceCached(pdf)) { response.sendRedirect(getDirectLinkToCache(pdf)) } else { response.setContentType("application/pdf") val renderedPdf = renderPdf(productId) cachePdf(renderedPdf) val out = response.getOutputStream IOUtils.copy(new ByteArrayInputStream(renderedPdf.toByteArray), out) out.flush() out.close() }

しかし問題がある - これらのリダイレクトはFirefoxでは機能しませんが、Google Chromeなどの他のブラウザでうまく機能します。 IS3ストレージに直接ファイルを渡すとFirefoxの場合も機能し、AS3でファイルがキャッシュされていない場合も機能し、リダイレクトの代わりにPDFファイルを返します。他のCORSパラメータを設定しようとしましたが、FirefoxがAS3サーバーへのクエリを実行しようとしないことを認識しました。

これはクロムがします。最初のクエリ:

<事前> <コード> Remote Address:127.0.0.1:8080 Request URL:http://127.0.0.1:8080/api/client/255/product/90/livePdfPreviewFile Request Method:GET Status Code:302 Found Response Headers view source Cache-Control:no-cache Cache-Control:no-store Content-Length:0 Date:Thu, 03 Sep 2015 08:06:01 GMT Expires:Thu, 01 Jan 1970 00:00:00 GMT Location:http://bucket-local.s3.amazonaws.com/product-preview-pdfs/90-255.pdf Pragma:no-cache Server:Apache-Coyote/1.1 Request Headers view source Accept:*//* Accept-Encoding:gzip, deflate, sdch Accept-Language:en-US,en;q=0.8 Connection:keep-alive Cookie:JSESSIONID=856CF2090D14BC3E6C869CD5158CAF40 Host:127.0.0.1:8080 Referer:http://127.0.0.1:8080/resources/web/viewer.html?file=%2Fapi%2Fclient%2F255%2Fproduct%2F90%2FlivePdfPreviewFile User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36

と受信ファイル上記の照会により得られた場所:

<事前> <コード> Remote Address:54.231.176.29:80 Request URL:http://bucket-local.s3.amazonaws.com/product-preview-pdfs/90-255.pdf Request Method:GET Status Code:200 OK Response Headers view source Accept-Ranges:bytes Access-Control-Allow-Methods:GET Access-Control-Allow-Origin:* Content-Length:26263 Content-Type:application/octet-stream Date:Thu, 03 Sep 2015 08:11:45 GMT ETag:"04a1c8853281706a478ce60080c3435f" Last-Modified:Wed, 02 Sep 2015 07:29:41 GMT Server:AmazonS3 Vary:Origin, Access-Control-Request-Headers, Access-Control-Request-Method x-amz-expiration:expiry-date="Fri, 04 Sep 2015 00:00:00 GMT", rule-id="Delete pdfs in 1 day" x-amz-id-2:YgGqaaIZ73tsnKhUdffU5Mit3nfFLx7dyX1or7redDN2TRjGK2e1AraE5Ks8Zy3oFavlyI3LNSc= x-amz-request-id:BA7DA8570C9E7D32 Request Headers view source Accept:*//* Accept-Encoding:gzip, deflate, sdch Accept-Language:en-US,en;q=0.8 Connection:keep-alive Host:bucket-local.s3.amazonaws.com Origin:http://127.0.0.1:8080 Referer:http://127.0.0.1:8080/resources/web/viewer.html?file=%2Fapi%2Fclient%2F255%2Fproduct%2F90%2FlivePdfPreviewFile User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36

その後PDFはブラウザで完全に表示されます。しかしFirefoxはリダイレクトを実行しようとしていません。このブラウザはすべて私のサーバーから302を受信して​​います。 AS3にクエリを実行しようとしないことさえありません。

だから私が持っているすべてのクエリに対するこの応答:

<事前> <コード> Request URL: http://127.0.0.1:8080/api/client/255/product/90/livePdfPreviewFile Request Method: GET Status Code: HTTP/1.1 302 Found Request Headers 10:16:05.000 User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:40.0) Gecko/20100101 Firefox/40.0 Referer: http://127.0.0.1:8080/resources/js/pdfjs/pdf.worker.js Host: 127.0.0.1:8080 Connection: keep-alive Accept-Language: en-US,en;q=0.5 Accept-Encoding: gzip, deflate Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*//*;q=0.8 Sent Cookie JSESSIONID: EB6EC83CFE958FF3FD994A61A4CC7CDE Response Headers Δ1546ms Server: Apache-Coyote/1.1 Pragma: no-cache Location: http://bucket-local.s3.amazonaws.com/product-preview-pdfs/90-255.pdf Expires: Thu, 01 Jan 1970 00:00:00 GMT Date: Thu, 03 Sep 2015 07:16:06 GMT Content-Length: 0 Cache-Control: no-cache, no-store

そしてそれは最後のクエリFirefoxが実行されました、Firebugのコンソールタブやネットワークタブには何もありません。

代わりにPDF.JSはこれを行います。

pdf.js v1.0.1040(ビルド:997096F)メッセージ:予期しないサーバーの応答 (0)PDFを取得しながら " http://127.0.0.1:8080/api/client/255/製品/ 90 / LIVEPDFPREVIEWFILE "。

では、Firefoxがリダイレクトによって取得されたファイルにクエリを実行しようとしないのはなぜですか?私はPDF.jsのJavaScriptをデバッグしていますが、Firefoxは self.load で例外がスローされ、最近「予期しないサーバーレスポンス」として処理します。

<事前> <コード> PDFJS.getDocument(parameters, pdfDataRangeTransport, passwordNeeded, getDocumentProgress).then( function getDocumentCallback(pdfDocument) { self.load(pdfDocument, scale); self.loading = false; }, ... <handlers>
英語

I got a website i need to improve. This site contains pdf files unique to each user, and PDF.js library is used to allow users viewing them. Those pdf files are generated automatically by first call by link like httр://website.com/api/client/255/product/90/livePdfPreviewFile which returns Content-Type: application/pdf, then generated file will be cached in Amazon S3 storage - after the next call by the same link it will be downloaded from AS3 by my server and given to client for preview instead of re-generating. So link is passed as GET-parameter to PDF.js script like this:

httр://website.com//resources/web/viewer.html?file=api%2Fclient%2F255%2Fproduct%2F90%2FlivePdfPreviewFile 

and everything works fine, but I had to reduce server load and simply redirect my server's response directly to file in Amazon S3 storage instead of using my server as gateway for those files. I have configured CORS settings using AmazonS3 API (this is simple configuration without allowed and exposed headers mentioning, but it works with Google Chrome):

val config = new BucketCrossOriginConfiguration() val rules = new java.util.ArrayList[CORSRule]()  val bucketCORSRule = new CORSRule().withId(CORS_NAME)   .withAllowedOrigins(util.Arrays.asList("*"))   .withAllowedMethods(util.Arrays.asList(CORSRule.AllowedMethods.GET))  rules.add(bucketCORSRule) config.setRules(rules) s3Client.setBucketCrossOriginConfiguration(bucketName, config) 

Then I have changed code responsible for returning pdf file to client so it could redirect to cached file:

if (isResourceCached(pdf)) {     response.sendRedirect(getDirectLinkToCache(pdf)) } else {     response.setContentType("application/pdf")     val renderedPdf = renderPdf(productId)     cachePdf(renderedPdf)     val out = response.getOutputStream     IOUtils.copy(new ByteArrayInputStream(renderedPdf.toByteArray), out)     out.flush()     out.close() } 

But there is the problem - those redirections do not work in Firefox, but work fine in other browsers such as Google Chrome! When I pass file to PDF.js located directly in AS3 storage it works for Firefox too, also it works when file is not cached in AS3 and pdf-generating link returns pdf file instead of redirection. I tried to set other CORS parameters, but then I realized that Firefox does not even try to perform any queries to AS3 server.

This is what Chrome does. First query:

Remote Address:127.0.0.1:8080 Request URL:http://127.0.0.1:8080/api/client/255/product/90/livePdfPreviewFile Request Method:GET Status Code:302 Found  Response Headers view source Cache-Control:no-cache Cache-Control:no-store Content-Length:0 Date:Thu, 03 Sep 2015 08:06:01 GMT Expires:Thu, 01 Jan 1970 00:00:00 GMT Location:http://bucket-local.s3.amazonaws.com/product-preview-pdfs/90-255.pdf Pragma:no-cache Server:Apache-Coyote/1.1  Request Headers view source Accept:*//* Accept-Encoding:gzip, deflate, sdch Accept-Language:en-US,en;q=0.8 Connection:keep-alive Cookie:JSESSIONID=856CF2090D14BC3E6C869CD5158CAF40 Host:127.0.0.1:8080 Referer:http://127.0.0.1:8080/resources/web/viewer.html?file=%2Fapi%2Fclient%2F255%2Fproduct%2F90%2FlivePdfPreviewFile User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36 

And receiving file which location we have obtained by query above:

Remote Address:54.231.176.29:80 Request URL:http://bucket-local.s3.amazonaws.com/product-preview-pdfs/90-255.pdf Request Method:GET Status Code:200 OK  Response Headers view source Accept-Ranges:bytes Access-Control-Allow-Methods:GET Access-Control-Allow-Origin:* Content-Length:26263 Content-Type:application/octet-stream Date:Thu, 03 Sep 2015 08:11:45 GMT ETag:"04a1c8853281706a478ce60080c3435f" Last-Modified:Wed, 02 Sep 2015 07:29:41 GMT Server:AmazonS3 Vary:Origin, Access-Control-Request-Headers, Access-Control-Request-Method x-amz-expiration:expiry-date="Fri, 04 Sep 2015 00:00:00 GMT", rule-id="Delete pdfs in 1 day" x-amz-id-2:YgGqaaIZ73tsnKhUdffU5Mit3nfFLx7dyX1or7redDN2TRjGK2e1AraE5Ks8Zy3oFavlyI3LNSc= x-amz-request-id:BA7DA8570C9E7D32  Request Headers view source Accept:*//* Accept-Encoding:gzip, deflate, sdch Accept-Language:en-US,en;q=0.8 Connection:keep-alive Host:bucket-local.s3.amazonaws.com Origin:http://127.0.0.1:8080 Referer:http://127.0.0.1:8080/resources/web/viewer.html?file=%2Fapi%2Fclient%2F255%2Fproduct%2F90%2FlivePdfPreviewFile User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36 

After that Pdf is shown perfectly in browser. But Firefox does not even try to perform redirection. All this browser does is receiving 302 from my server, after that it does nothing. It doesn't even try to perform any queries to AS3.

So this response for a first query is all I've got:

Request URL:    http://127.0.0.1:8080/api/client/255/product/90/livePdfPreviewFile Request Method:     GET Status Code:    HTTP/1.1 302 Found  Request Headers 10:16:05.000 User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:40.0) Gecko/20100101 Firefox/40.0 Referer:    http://127.0.0.1:8080/resources/js/pdfjs/pdf.worker.js Host:   127.0.0.1:8080 Connection: keep-alive Accept-Language:    en-US,en;q=0.5 Accept-Encoding:    gzip, deflate Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*//*;q=0.8 Sent Cookie JSESSIONID: EB6EC83CFE958FF3FD994A61A4CC7CDE  Response Headers Δ1546ms Server: Apache-Coyote/1.1 Pragma: no-cache Location:   http://bucket-local.s3.amazonaws.com/product-preview-pdfs/90-255.pdf Expires:    Thu, 01 Jan 1970 00:00:00 GMT Date:   Thu, 03 Sep 2015 07:16:06 GMT Content-Length: 0 Cache-Control:  no-cache, no-store 

And that was the last query Firefox has performed, nothing more in Console and Network tabs of Firebug.

Instead PDF.js does this:

PDF.js v1.0.1040 (build: 997096f) Message: Unexpected server response (0) while retrieving PDF "http://127.0.0.1:8080/api/client/255/product/90/livePdfPreviewFile".

So why does not Firefox even try to perform query to file which location was obtained by redirection? I have debugged javascript of PDF.js, but looks like Firefox throws exception on self.load and handles it as "Unexpected server response" lately:

PDFJS.getDocument(parameters, pdfDataRangeTransport, passwordNeeded,                 getDocumentProgress).then(             function getDocumentCallback(pdfDocument) {                 self.load(pdfDocument, scale);                 self.loading = false;             }, ... <handlers>  
</div
              
     
     

回答リスト

1
 
vote

私は同じ問題に遭遇した。 CORSを使用した302個のホストはChromeで正しく機能しました。それをFirefoxとIE(Safariはそれでもうまくいかない)で作業することを許可された変更は、すべてのソースアップフロントを含めていました。

私は

を持っていた前に <事前> <コード> <script src="bower_components/pdfjs-dist/build/pdf.js"></script> <script> PDFJS.workerSrc = 'bower_components/pdfjs-dist/build/pdf.worker.js' </script>

変更後の

<事前> <コード> <script src="bower_components/pdfjs-dist/build/pdf.combined.js"></script>

頑張ってください。

更新

pdf.combined.jsを使用して判明したことは、答えの1つとして推奨される答えの1つとしてレンダリングするためのWebWorkerを効果的にオフにします。

しかし、BLOBとURL.CreateObjectURLを使用して有効になっているWebWorkersを使用して動作する方法があります。ここで見てください

http://colonelpanic.net / 2014/08 / USING-PDF-JS-WEB-WERK-WERK-CORT-CORLS /

 

I ran into the same issue. The 302 to another host using CORS only worked correctly on Chrome. The change that allowed it to work on Firefox and IE (Safari so far still doesn't work) was including all the source up front.

Before I had

<script src="bower_components/pdfjs-dist/build/pdf.js"></script> <script>    PDFJS.workerSrc = 'bower_components/pdfjs-dist/build/pdf.worker.js' </script> 

After the change

<script src="bower_components/pdfjs-dist/build/pdf.combined.js"></script> 

Good luck.

Update

Turns out using pdf.combined.js effectively turns off the webworker for rendering as one of the answers above suggested.

But there is a way to get it to work with webworkers enabled with the use of Blob and URL.createObjectURL. Take a look here

http://colonelpanic.net/2014/08/using-pdf-js-web-worker-cross-domain-cors/

</div
 
 

関連する質問

0  CANVASタグに変換されたPDF.js PDFからBase64 PNGを取得しますか?  ( Getting a base64 png from a pdf js pdf converted to a canvas tag ) 
MozillaによってPDF.jsライブラリとPDF.jsライブラリを変換することによって作成されたキャンバスから録音されたCANVASからBase64エンコードPNG値を取得しようとしています。 SO、私はHTMLキャンバスに変換されたBase64エンコ...

1  PDF.jsを使用するときにページの検出方法がレンダリングされました  ( How to detect page has been rendered when using pdf js ) 
PDF.jsを使用してPDFのコンテンツをWebブラウザにレンダリングしています。デスクトップブラウザで完璧に機能しますが、iPadで矛盾する行動に気づいた。 iPadでは、PDF.jsが空白の/白いキャンバスをレンダリングします。 ページのレンダリングが終...

0  新しいWebページでPDF.jsスクリプトを使用してGoogle Drive PDF URLを取得する方法  ( How to fetch google drive pdf url using pdf js script on new web page ) 
Googleドライブを使用する2つのWebサイトの例を持ち、新しい文書を持っているときはいつでも、URLで一意のIDを変更するだけではありません。それはまたSEOフレンドリーでグーグルによって索引付けされています。それで、その生のコードは何ですか? デモ1...

29  ブラウザの既存* PDFを編集します  ( Edit existing pdf in a browser ) 
現在、サーバーからPDFのBase64表現を取得しているWebアプリケーションを持っています。 MozillaのPDF.jsを使用してこれを 9988777663 に表示し、ドロップダウンでページを切り替えます。 私が見つけることができたすべてのものによると ...

14  pdf.jsとimageDataを使用して、単一キャンバスに.pdfをレンダリングします  ( Render pdf to single canvas using pdf js and imagedata ) 
PDF.jsを使用して.pdfドキュメント全体を読み、それからすべてのページを単一のキャンバスにレンダリングしようとしています。 私の考え:各ページをキャンバスにレンダリングし、iMageData(Context.GetImagedata())を取得し、キャ...

5  PDF.JSモバイルアプリのアクセス制御許可 - 原産地問題  ( Pdf js in mobile apps access control allow origin issue ) 
SenchaとCordovaを使用してモバイル機器のアプリを開発しようとしています。 PDFサポートがAndroidのブラウザでは利用できないため、PDF.jsを使用することにしました。ローカルのPDFファイルのロード中にうまく機能していますが、リモートファ...

9  HTML5キャンバスでのPDFレンダリング  ( Pdf rendering in html5 canvas ) 
HTML5キャンバスでPDFをどのようにレンダリングできますか? PDF.jsスクリプト https://github.com/mozilla/pdf.js < / a>。しかし、そのプロジェクトはまだ開発中です。 ...

7  pdf.js getDocumentに失敗しました  ( Pdf js failing on getdocument ) 
ブラウザ:Chrome 環境:GRAILS APP LOCALHOST ローカルホストでGrailsアプリを実行しています(PDF.jsとローカルファイルシステムの問題があることがわかります)ではなく、私が知っているURLが失敗するだろうmyped J...

6  PDFをPDF.jsを使用して印刷する  ( Printing pdf using pdf js ) 
PDF.jsを使用して1ページのPDFをページに埋め込むと、HTMLページ全体ではなくPDFだけを印刷できるようにしたいです。 これは可能ですか? ...

6  Flask Render_templateをURLパラメータ  ( Flask render template with url parameter ) 
PDF.jsを使用してWebにPDFをレンダリングします。このようなターゲットURLの形式: <事前> <コード> http://www.example.com/book?file=abc.pdf 私の問題は次のとおりです。 フラスコテンプレートを使用し...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有