Pdf.js: Penampil.js tidak dapat mengambil aliran PDF online

Masalah terkait adalah #522, #586 dan #842

Seperti yang dirujuk dalam masalah di atas, ini adalah sesuatu yang harus diperbaiki sendiri oleh pengguna menggunakan proxy atau CORS.

Hai Brend,

apa alasan utama bahwa "pengguna harus memperbaiki sendiri menggunakan proxy atau CORS"?

Penting bahwa PDF dapat berasal dari lokal (mengunggah), server sebagai file, server sebagai aliran seperti "http://".

Sebagai URL gambar, pembaca PDF harus mendukung URL HTTP.

Terima kasih

@jonasyuandotcom cors memungkinkan Anda mendapatkan pdf menggunakan http dari server yang sama. namun browser melindungi pengguna dari mendapatkan/mengirim data ke server asing. Server tersebut harus menggunakan header http untuk melewati batasan ini.

Karena proxy sisi server Anda akan ditempatkan di server yang sama dengan kors penampil akan baik-baik saja dengan itu.

@notmasteryet terima kasih. Ini berfungsi saat menggunakan server yang sama seperti

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

Hai Jonas,

Kami tidak akan menerapkan ini di pihak kami karena tidak mungkin kami terapkan karena batasan keamanan browser. Lihat http://en.wikipedia.org/wiki/XMLHttpRequest#Cross -domain_requests

Brendan

Hai @brendandahl

Saya ingin tahu apakah ada pembaruan sejak 2011? Apakah masih tidak mungkin untuk memperbaiki masalah CORS?

Ya. Lihat https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq -xhr untuk informasi lebih lanjut.

Terima kasih Tim!

Hai @timvandermeij. Terimakasih atas tanggapan Anda. Saya sudah mencoba banyak solusi tetapi saya masih tidak dapat mengizinkan CORS di server web saya. Apakah Anda punya contoh git?

@Dassine ini dia http://mozilla.github.io/pdf.js/web/viewer.html?file=//async5.org/moz/pdfjs.pdf -- PDF Viewer memuat http://async5.org /moz/pdfjs.pdf . Perhatikan bahwa async5.org mengizinkan mozilla.github.io untuk mendapatkan file. Jika tidak, browser web harus memblokir akses file jarak jauh untuk alasan keamanan. Ini adalah praktik standar di web dan tidak ada yang bisa dilakukan PDF.js untuk menghindari keamanan browser.

Jika Anda menyematkan kontrol browser ke dalam aplikasi desktop/seluler, Anda dapat meminta data biner dengan menggunakan OS/Framework API dan meneruskannya ke PDF.js sebagai Uint8Array.

Terima kasih @yurydelendik untuk tautan Anda. Saya tahu bahwa PDF.js tidak mengelola CORS. Saya sudah mencoba solusi yang dikirim oleh @timvandermeij dan lainnya tetapi gagal. Saya mencari solusi implementasi/modifikasi yang tepat setelah repo pdf.js diunduh. Terima kasih

@yurydelendik Saya juga mengalami masalah saat memuat file PDF jarak jauh. Tetapi kesalahan ini hanya terjadi di Chrome.
PDF.js v1.0.1040 (build: 997096f)
Pesan: Respons server tak terduga (0) saat mengambil PDF " http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal.pdf ".

Anda dapat melihat bahwa PDF yang saya coba muat ada di server lain yang tidak dapat saya kendalikan. Tapi tetap saja saya ingin menunjukkan PDF ini di viewer.js . saya

Saya tidak memiliki banyak pengalaman dengan CORS tetapi saya membuat file crossdomain.xml keamanan paling sedikit di server saya tetapi meskipun demikian itu tidak berfungsi.

@hashbyte Anda akan memerlukan proxy untuk server. Proxy yang sangat sederhana (dikembangkan oleh saya) adalah CORS Anywhere. Cukup tambahkan URL proxy sebelum URL ke file PDF, mis

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

Kemudian URL-encode URL ini dan letakkan di parameter file , dan Anda akan mendapatkan tautan yang dapat membuka halaman apa pun: 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

Catatan: Jika URL untuk PDF tidak berisi tanda persen atau karakter & , maka cara yang lebih mudah untuk mendapatkan tautan dengan cepat adalah dengan menambahkan URL penampil sebelum tautan (jadi, tanpa penyandian URL terlebih dahulu ). Lakukan ini hanya jika Anda mengetikkan URL secara manual (misalnya saat melakukan tes cepat):
https://mozilla.github.io/pdf.js/web/viewer.html?file=https://cors-anywhere.herokuapp.com/ http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal. pdf

Catatan: Demo CORS Anywhere hanya disediakan untuk mendemonstrasikan fitur tersebut. Jika Anda akan menggunakan fitur ini di situs dengan banyak pengunjung, harap host sendiri instance CORS Anywhere, untuk menghindari beban yang tidak adil pada server demo publik. Jika saya melihat bahwa kinerja CORS Anywhere merangkak karena penyalahgunaan, Asal Anda akan masuk daftar hitam. Saat menghosting CORS Anywhere sendiri, Anda dapat membatasi akses ke situs Anda hanya melalui parameter konfigurasi originWhitelist untuk menghindari penyalahgunaan semacam ini.

Halo,
Saya memiliki kesalahan ini ketika saya ingin memuat pdf dari url asing

Kesalahan: asal file tidak cocok dengan milik pemirsa
throw new Error('file asal tidak cocok dengan viewer');

tolong bantu!

Saya memiliki kesalahan ini ketika saya ingin memuat pdf dari url asing

@gildassamuel lihat #6916 untuk detailnya.

@jonasyuandotcom Jika file dikelola sendiri, Anda dapat meletakkan file dan pdfjs di server file yang sama.

Hai, saya telah mengikuti instruksi untuk mengatur "Access-Control-Allow-Origin" di server file tetapi saya terus mendapatkan kesalahan ini:

Header http adalah sebagai berikut:

Petunjuk apa pun akan dihargai, bahkan jika Anda tidak yakin dapatkah Anda memberikan beberapa kemungkinan penyebab masalah tersebut. Terima kasih banyak!

@yjguoo Pesan kesalahan dan header tidak bertambah.

Saya pikir target redirect tidak memiliki header yang diharapkan.

Kunjungi chrome://net-internals/#events dan ulangi langkah-langkah untuk melihat tajuk sebenarnya dari pengalihan yang diblokir di log.

Hai Rob terima kasih atas respon cepatnya,

Saya perhatikan ketika saya secara manual memasukkan url yang diminta "https://files.dev52.slack.com/files-pri/T076SHX5W-F07CGBKK2/git-for-beginners-handout.pdf" Saya mendapatkan header respons yang berbeda dari server file:

Perhatikan bahwa saya dialihkan ke lokasi berbeda di header respons. Dan di lokasi baru itu saya mendapatkan status 200 ok.

Pertanyaan pertama saya: apakah ada perbedaan antara mengetik url secara manual di browser vs melalui XmlHttpRequest?
BTW Saya menggunakan penampil pdf.js default (html css js) semua fungsi berfungsi kecuali meminta pdf dari Asal yang berbeda (masalah permintaan lintas oring)
Pertanyaan kedua: menurut Anda apakah ini masalah saya atau cara viewer.js/ pdf.js default melakukan XmlHttpRequest

Terima kasih :)

Pertanyaan pertama saya: apakah ada perbedaan antara mengetik url secara manual di browser vs melalui XmlHttpRequest?

Ya, terutama dengan permintaan lintas asal. Saat Anda melakukan permintaan lintas asal, permintaan tersebut hanya diterima jika permintaan tersebut diizinkan oleh CORS. Browser akan mengeluarkan permintaan dengan tajuk Origin , server dapat menggunakan ini untuk memutuskan apakah akan menyetujui permintaan (dengan menyertakan asal yang diminta di tajuk respons Access-Control-Allow-Origin ).

Selain itu, secara default kredensial tidak disertakan dalam permintaan lintas-asal. Untuk menyertakan cookie, server harus merespons dengan Access-Control-Allow-Credentials: true dan permintaan XHR harus memiliki atribut withCredentials disetel ke true .

Pertanyaan kedua: menurut Anda apakah ini masalah saya atau cara viewer.js/ pdf.js default melakukan XmlHttpRequest

Saya pikir server Anda harus dikonfigurasi secara berbeda.

Lihat dokumentasi di MDN untuk info lebih lanjut: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Atau baca spesifikasi CORS: https://www.w3.org/TR/2014/REC-cors-20140116/

Hai Rob,

Saya pikir saya memperbaiki masalah ini dengan juga mengatur Access-Control-Allow-Credentials: true . Terima kasih banyak atas bantuannya <3. Namun saya mendapatkan masalah lain tentang pengalihan dan saya tidak tahu apakah Anda bisa memberi saya beberapa petunjuk. saya melakukan XHR
permintaan menggunakan URL#1 (masalah yang Anda bantu saya perbaiki). Kemudian saya mendapatkan redirect ke URL#2(status 302). Tetapi baik URL#1 dan URL#2 menunjuk ke server yang sama. Menyebabkan kesalahan berikut:

Saya mencoba mengatur header respons yang sama seperti yang saya lakukan pada URL#1 tetapi saya menyadari bahwa keduanya berada di server yang sama dan Origin adalah nol.

Saya pikir itu karena kedua URL menunjuk ke server yang sama sehingga redirect Origin adalah NULL tetapi saya tidak terlalu yakin? Sekarang bagaimana saya menambahkan header yang berhubungan dengan dua Origin yang berbeda tetapi kedua URL menunjuk ke server file yang sama. Saya mencoba menggunakan regex seperti * tetapi ternyata tidak diizinkan :( Sekali lagi terima kasih!

Setelah pengalihan lintas-Asal, Chrome menyetel tajuk Asal ke nilai "null" alih-alih URL yang sebenarnya - https://crbug.com/154967

Anda dapat mengembalikan Access-Control-Allow-Origin kondisional dengan nilai null , tetapi hanya jika Anda ingin semua situs web dapat membaca sumber daya itu . Jika tidak (yang kemungkinan besar), maka Anda harus menghindari pengalihan. Misalnya, dengan langsung mengirimkan permintaan ke URL tujuan (jika Anda tidak mengetahui URL sebelumnya, tambahkan titik akhir API baru ke server Anda yang mengembalikan URL tujuan).

Terima kasih! Saya akan melihat ke dalamnya :)

Hai Rob, menurut Anda ada cara lain untuk menginisialisasi penampil pdf atau pdf.js dengan src yang sudah disetel dan menghindari permintaan XHR secara bersamaan?

@yjguoo Anda dapat base64-encode data PDF dan menggunakan data-URL. Untuk file PDF besar, ini menghasilkan pengalaman pengguna yang lebih buruk (= halaman kosong tanpa bilah kemajuan) karena pengkodean data sebagai base64 meningkatkan ukuran file sebesar 33%. Saya merekomendasikan untuk terus menggunakan XHR karena alasan ini.

Hai, baru saja diuji dan berfungsi jika CORS diaktifkan, tetapi yang saya lihat adalah file tidak mendapatkan potongan/rentang jika file sangat besar.

Memecahkan menambahkan ini di .htaccess:
Header mengatur byte Accept-Ranges
Set header Access-Control-Allow-Origin "*"
Header mengatur Access-Control-Allow-Methods "GET"
Header mengatur Access-Control-Allow-Headers "Content-Type, Range"
Header set Access-Control-Expose-Headers "Accept-Ranges, Content-Encoding, Content-Length, Content-Range"

Terima kasih!!!

@Rob--W Itu sangat membantu. Apakah ada kemungkinan untuk bekerja dari dalam proyek (seperti mengubah header XHR)? (di dalam pekerja.js)

Hai, untuk siapa pun yang masih mengalami masalah dengan ini, saya menyelesaikannya dengan:

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