Pdf.js: Die viewer.js kann keinen Online-PDF-Stream aufnehmen

Verwandte Themen sind #522, #586 und #842

Wie in den obigen Problemen erwähnt, muss der Benutzer dies mithilfe eines Proxys oder CORS selbst beheben.

Hallo Brend,

Was ist der Hauptgrund dafür, dass "der Benutzer das Problem selbst mit einem Proxy oder CORS beheben muss"?

Es ist wichtig, dass das PDF vom lokalen (Hochladen), Server als Datei, Server als Stream wie "http://" stammen kann.

Als Bild-URL sollte der PDF-Reader HTTP-URL unterstützen.

Danke

@jonasyuandotcom the cors ermöglicht es Ihnen, das PDF mit http vom selben Server

Da sich Ihr serverseitiger Proxy auf demselben Server wie ein Viewer befindet, ist dies in Ordnung.

@notmasteryet danke. Es funktioniert, wenn derselbe Server verwendet wird wie

var kDefaultURL = '/pdf-reader-web/sample.pdf';

Hallo Jonas,

Wir werden dies unsererseits nicht implementieren, da es uns aufgrund von Browser-Sicherheitsbeschränkungen nicht möglich ist, dies zu implementieren. Siehe http://en.wikipedia.org/wiki/XMLHttpRequest#Cross -domain_requests

Brendan

Hallo @brendandahl

Ich frage mich, ob es seit 2011 ein Update gibt? Ist es immer noch unmöglich, die CORS-Probleme zu beheben?

Ja. Weitere Informationen finden Sie unter https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq -xhr.

Danke Tim!

Hallo @timvandermeij. Vielen Dank für Ihre Antwort. Ich habe viele Lösungen ausprobiert, aber ich kann CORS auf meinem Webserver immer noch nicht zulassen. Hast du ein Git-Beispiel?

@Dassine Here you go http://mozilla.github.io/pdf.js/web/viewer.html?file=//async5.org/moz/pdfjs.pdf -- PDF Viewer lädt http://async5.org /moz/pdfjs.pdf . Beachten Sie, dass async5.org mozilla.github.io ermöglicht, Dateien abzurufen. Andernfalls muss ein Webbrowser aus Sicherheitsgründen den Zugriff auf eine entfernte Datei blockieren. Dies ist eine Standardpraxis im Web, und PDF.js kann nichts tun, um die Browsersicherheit zu umgehen.

Wenn Sie die Browsersteuerung in eine Desktop-/Mobilanwendung einbetten, können Sie mithilfe von OS/Framework-APIs binäre Daten anfordern und diese als Uint8Array an PDF.js übergeben.

Danke @yurydelendik für deine Links. Ich weiß, dass PDF.js CORS nicht verwaltet. Ich habe die von @timvandermeij und anderen gesendeten Lösungen

@yurydelendik Ich habe auch das Problem, eine Remote-PDF-Datei zu laden. Dieser Fehler tritt jedoch nur in Chrome auf.
PDF.js v1.0.1040 (Build: 997096f)
Meldung: Unerwartete Serverantwort (0) beim Abrufen von PDF " http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal.pdf ".

Sie können sehen, dass sich das PDF, das ich zu laden versuche, auf einem anderen Server befindet, auf den ich keine Kontrolle habe. Trotzdem möchte ich dieses PDF auf meinem viewer.js anzeigen

Ich habe nicht viel Erfahrung mit CORS, aber ich habe eine crossdomain.xml-Datei mit der geringsten Sicherheit auf meinem Server erstellt, aber selbst dann funktioniert es nicht.

@hashbyte Sie benötigen einen Proxy für den Server. Ein sehr einfacher Proxy (von mir entwickelt) ist CORS Anywhere. Stellen Sie einfach die URL des Proxys vor die URL zur PDF-Datei, zB

"https://cors-anywhere.herokuapp.com/" + 
"http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal.pdf" =
"https://cors-anywhere.herokuapp.com/http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal.pdf"

Dann URL-kodieren Sie diese URL und fügen Sie sie in den Parameter file , und Sie erhalten einen Link, der jede Seite öffnen kann: https://mozilla.github.io/pdf.js/web/viewer.html ?file=https%3A%2F%2Fcors-anywhere.herokuapp.com%2Fhttp%3A%2F%2Fbhpr.hrsa.gov%2Fhealthworkforce%2Frnsurveys%2Frnsurveyfinal.pdf

Hinweis: Wenn die URL für die PDF-Datei keine Prozentzeichen oder & Zeichen enthält, können Sie schnell einen Link erhalten, indem Sie einfach die Viewer-URL vor dem Link voranstellen (also ohne vorherige URL-Codierung ). Tun Sie dies nur, wenn Sie die URL manuell eingeben (z. B. bei einem Schnelltest):
https://mozilla.github.io/pdf.js/web/viewer.html?file=https://cors-anywhere.herokuapp.com/ http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal. pdf

Hinweis: Die CORS Anywhere-Demo dient nur zur Demonstration der Funktion. Wenn Sie diese Funktion auf einer Site mit vielen Besuchern verwenden möchten, hosten Sie die CORS Anywhere-Instanz bitte selbst, um eine unangemessene Belastung des öffentlichen Demoservers zu vermeiden. Wenn ich bemerke, dass die Leistung von CORS Anywhere aufgrund von Missbrauch gecrawlt wird, wird Ihr Ursprung auf die schwarze Liste gesetzt. Wenn Sie CORS Anywhere selbst hosten, können Sie den Zugriff auf Ihre Site nur über den Konfigurationsparameter originWhitelist , um diese Art von Missbrauch zu vermeiden.

Hallo,
Ich habe diesen Fehler, wenn ich ein PDF von einer fremden URL laden möchte

Fehler: Dateiursprung stimmt nicht mit dem des Betrachters überein
throw new Error('Dateiursprung stimmt nicht mit dem des Betrachters überein');

bitte hilfe!

Ich habe diesen Fehler, wenn ich ein PDF von einer fremden URL laden möchte

@gildassamuel siehe #6916 für Details.

@jonasyuandotcom Falls die Datei selbst verwaltet wird, können Sie die Datei und pdfjs auf demselben Dateiserver ablegen.

Hey, ich habe die Anweisungen zum Festlegen eines "Access-Control-Allow-Origin" auf dem Dateiserver befolgt, aber ich erhalte immer diese Fehlermeldung:

Die http-Header lauten wie folgt:

Wir freuen uns über jeden Hinweis, auch wenn Sie sich nicht sicher sind, ob Sie eine mögliche Ursache für das Problem angeben können. Vielen Dank!

@yjguoo Die Fehlermeldung und die Header stimmen nicht.

Ich denke, dass dem Umleitungsziel die erwarteten Header fehlen.

Besuchen Sie chrome://net-internals/#events und wiederholen Sie die Schritte, um die tatsächlichen Header der blockierten Weiterleitung im Protokoll anzuzeigen.

Hallo Rob danke für die schnelle Antwort,

Ich bemerke, dass, wenn ich die angeforderte URL "https://files.dev52.slack.com/files-pri/T076SHX5W-F07CGBKK2/git-for-beginners-handout.pdf" manuell eingebe, einen anderen Antwortheader vom Dateiserver erhalte:

Beachten Sie, dass ich im Antwortheader an eine andere Position weitergeleitet wurde. Und an diesem neuen Standort bekomme ich einen Status 200 ok.

Meine ersten Fragen: Gibt es einen Unterschied zwischen der manuellen Eingabe der URL im Browser und über XmlHttpRequest?
Übrigens, ich verwende den standardmäßigen pdf.js-Viewer (html css js). Alle Funktionen funktionieren, außer das Anfordern eines PDFs von einem anderen Ursprung (zB Cross-Oring-Anfrageproblem).
Zweite Frage: Glauben Sie, dass es ein Problem von meiner Seite ist oder wie die Standardansicht viewer.js/pdf.js die XmlHttpRequest ausführt?

Danke schön :)

Meine ersten Fragen: Gibt es einen Unterschied zwischen der manuellen Eingabe der URL im Browser und über XmlHttpRequest?

Ja, insbesondere bei ursprungsübergreifenden Anfragen. Wenn Sie eine ursprungsübergreifende Anfrage ausführen, wird die Anfrage nur akzeptiert, wenn die Anfrage von CORS zugelassen wird. Der Browser gibt eine Anfrage mit dem Origin Header aus, der Server kann dies verwenden, um zu entscheiden, ob die Anfrage genehmigt wird (indem der angeforderte Ursprung in den Access-Control-Allow-Origin Antwortheader aufgenommen wird).

Außerdem sind standardmäßig keine Anmeldeinformationen in ursprungsübergreifenden Anforderungen enthalten. Um Cookies einzuschließen, muss der Server mit Access-Control-Allow-Credentials: true antworten und die XHR-Anfrage muss das withCredentials Attribut auf true .

Zweite Frage: Glauben Sie, dass es ein Problem von meiner Seite ist oder wie die Standardansicht viewer.js/pdf.js die XmlHttpRequest ausführt?

Ich denke, dass Ihr Server anders konfiguriert sein muss.

Weitere Informationen finden Sie in der Dokumentation zu MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Oder lesen Sie die Spezifikation von CORS: https://www.w3.org/TR/2014/REC-cors-20140116/

Hallo Rob,

Ich glaube, ich habe das Problem behoben, indem ich auch Access-Control-Allow-Credentials: true . Vielen Dank für die Hilfe <3. Ich habe jedoch ein weiteres Problem mit einer Weiterleitung und ich weiß nicht, ob Sie mir einige Hinweise geben können. Ich mache XHR
Anfrage mit URL#1 (das Problem, das Sie mir helfen zu beheben). Dann bekomme ich eine Weiterleitung zu URL#2 (Status 302). Aber sowohl URL#1 als auch URL#2 verweisen auf denselben Server. Verursacht folgenden Fehler:

Ich habe versucht, dieselben Antwortheader wie für URL#1 festzulegen, aber ich stelle fest, dass sie sich beide auf demselben Server befinden und Origin null ist.

Ich denke, es liegt daran, dass beide URLs auf denselben Server verweisen, sodass der Umleitungsursprung NULL ist, aber ich bin mir nicht sicher? Wie würde ich nun Header hinzufügen, die sich auf zwei verschiedene Ursprünge beziehen, aber beide URLs verweisen auf denselben Dateiserver. Ich habe versucht, Regex wie * zu verwenden, aber anscheinend ist dies nicht erlaubt :( Nochmals vielen Dank!

Nach einer Cross-Origin-Umleitung setzt Chrome den Origin-Header auf den Wert "null" anstelle der eigentlichen URL - https://crbug.com/154967

Sie können Access-Control-Allow-Origin mit dem Wert null bedingt zurückgeben, aber nur, wenn Sie möchten, dass alle Websites diese Ressource lesen können . Wenn nicht (was am wahrscheinlichsten ist), müssen Sie die Weiterleitung vermeiden. Beispielsweise indem Sie die Anfrage direkt an die Ziel-URL senden (wenn Sie die URL nicht im Voraus kennen, fügen Sie Ihrem Server einen neuen API-Endpunkt hinzu, der die Ziel-URL zurückgibt).

Danke schön! Ich schaue mir das an :)

Hey Rob, denkst du, es gibt eine andere Möglichkeit, den PDF-Viewer oder pdf.js mit der bereits festgelegten src zu initialisieren und XHR-Anfragen insgesamt zu vermeiden?

@yjguoo Sie können die PDF-Daten base64-kodieren und eine Daten-URL verwenden. Bei großen PDF-Dateien führt dies zu einer schlechteren Benutzererfahrung (=leere Seite ohne Fortschrittsbalken), da die Codierung der Daten als base64 die Dateigröße um 33% erhöht. Aus diesem Grund empfehle ich, XHR weiter zu verwenden.

Hallo, gerade getestet und es funktioniert, wenn CORS aktiviert ist, aber was ich sehe, ist, dass die Datei nicht in Blöcken/Bereichen angezeigt wird, wenn die Datei sehr groß ist.

Gelöst, dies in .htaccess hinzuzufügen:
Header-Set Accept-Ranges Bytes
Header-Set Access-Control-Allow-Origin "*"
Header-Set Access-Control-Allow-Methoden "GET"
Header-Set Access-Control-Allow-Header "Content-Type, Range"
Header-Set Access-Control-Expose-Headers "Accept-Ranges, Content-Encoding, Content-Length, Content-Range"

Danke schön!!!

@Rob--W Es war sehr hilfreich. Gibt es eine Möglichkeit, aus dem Projekt heraus zu arbeiten (wie das Ändern der XHR-Header)? (innerhalb von worker.js)

Hallo, für alle, die immer noch Probleme damit haben, habe ich es gelöst mit:

https://drive.google.com/viewerng/viewer?embedded=true&url=http://www.africau.edu/images/default/sample.pdf