Pdf.js: El visor.js no puede tomar flujo de PDF en línea

Los temas relacionados son #522, #586 y #842

Como se menciona en los problemas anteriores, esto es algo que el usuario deberá solucionar por su cuenta mediante un proxy o CORS.

Hola Brenda,

¿Cuál es la razón principal por la que "el usuario tendrá que arreglarlo por su cuenta usando un proxy o CORS"?

Es importante que el PDF pueda provenir de un servidor local (carga), como un archivo, servidor como flujo como "http://".

Como URL de imagen, el lector de PDF debe admitir URL HTTP.

Gracias

@jonasyuandotcom the cors le permite obtener el pdf usando http desde el mismo servidor. sin embargo, el navegador protege al usuario de obtener/enviar los datos a servidores extranjeros. Esos servidores deben usar encabezados http para eludir esta restricción.

Dado que su proxy del lado del servidor estará ubicado en el mismo servidor que un espectador, Cors estará de acuerdo con eso.

@notmasteryet gracias. Funciona cuando se usa el mismo servidor como

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

Hola jonas,

No implementaremos esto de nuestra parte porque no es posible que lo implementemos debido a las restricciones de seguridad del navegador. Ver http://en.wikipedia.org/wiki/XMLHttpRequest#Cross-domain_requests

Brendan

Hola @brendandahl

Me preguntaba si hay alguna actualización desde 2011. ¿Sigue siendo imposible solucionar los problemas de CORS?

Si. Consulte https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq -xhr para obtener más información.

¡Gracias Timoteo!

Hola @timvandermeij. Gracias por su respuesta. He probado muchas soluciones pero todavía no estoy habilitado para permitir CORS en mi servidor web. ¿Tienes algún ejemplo de git?

@Dassine aquí tienes http://mozilla.github.io/pdf.js/web/viewer.html?file=//async5.org/moz/pdfjs.pdf -- PDF Viewer carga http://async5.org /moz/pdfjs.pdf . Tenga en cuenta que async5.org permite que mozilla.github.io obtenga archivos. De lo contrario, un navegador web tiene que bloquear el acceso a un archivo remoto por razones de seguridad. Es una práctica estándar en la web y no hay nada que PDF.js pueda hacer para eludir la seguridad de los navegadores.

Si incorpora el control del navegador en la aplicación de escritorio/móvil, puede solicitar datos binarios mediante el uso de las API del sistema operativo/Framework y pasarlos a PDF.js como Uint8Array.

Gracias @yurydelendik por tus enlaces. Sé que PDF.js no administra CORS. Probé las soluciones enviadas por

@yurydelendik También tengo el problema de cargar un archivo PDF remoto. Pero este error solo ocurre en Chrome.
PDF.js v1.0.1040 (compilación: 997096f)
Mensaje: Respuesta inesperada del servidor (0) al recuperar el PDF " http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal.pdf ".

Puede ver que el PDF que intento cargar está en otro servidor sobre el que no tengo ningún control. Pero aún deseo mostrar este PDF en mi visor.js

No tengo mucha experiencia con CORS, pero creé un archivo crossdomain.xml de seguridad mínima en mi servidor, pero aun así no funciona.

@hashbyte Necesitará un proxy para el servidor. Un proxy muy simple (desarrollado por mí) es CORS Anywhere. Simplemente anteponga la URL del proxy antes de la URL del archivo PDF, por ejemplo

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

Luego codifique en URL esta URL y colóquela en el parámetro file , y obtendrá un enlace que puede abrir cualquier página: 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

Nota: si la URL del PDF no contiene ningún signo de porcentaje o & caracteres, entonces una forma más fácil de obtener rápidamente un enlace es simplemente anteponer la URL del visor antes del enlace (es decir, sin codificar primero la URL). ). Solo haga esto si escribe manualmente la URL (por ejemplo, al hacer una prueba rápida):
https://mozilla.github.io/pdf.js/web/viewer.html?file=https ://cors-anywhere.herokuapp.com/ http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal. pdf

Nota: La demostración de CORS Anywhere solo se proporciona para demostrar la función. Si va a utilizar esta función en un sitio con muchos visitantes, aloje la instancia de CORS Anywhere usted mismo, para evitar poner una carga injusta en el servidor de demostración público. Si observo que el rendimiento de CORS Anywhere se está rastreando debido a un abuso, su origen se incluirá en la lista negra. Cuando aloja CORS Anywhere usted mismo, puede restringir el acceso a su sitio solo a través del parámetro de configuración originWhitelist para evitar este tipo de abuso.

Hola,
Tengo este error cuando quiero cargar pdf desde una URL extranjera

Error: el origen del archivo no coincide con el del espectador
throw new Error('el origen del archivo no coincide con el del espectador');

¡por favor ayuda!

Tengo este error cuando quiero cargar pdf desde una URL extranjera

@gildassamuel vea #6916 para más detalles.

@jonasyuandotcom En el caso de que usted mismo administre el archivo, puede colocar el archivo y pdfjs en un mismo servidor de archivos.

Oye, he seguido las instrucciones para establecer un "Acceso-Control-Permitir-Origin" en el servidor de archivos, pero sigo recibiendo este error:

Los encabezados http son los siguientes:

Cualquier sugerencia sería apreciada, incluso si no está seguro, puede proporcionar alguna posible causa del problema. ¡Muchos gracias!

@yjguoo El mensaje de error y los encabezados no se suman.

Creo que al objetivo de redirección le faltan los encabezados esperados.

Visite chrome://net-internals/#events y repita los pasos para ver los encabezados reales de la redirección bloqueada en el registro.

Hola Rob gracias por la rápida respuesta,

Noté que cuando ingreso manualmente la URL solicitada "https://files.dev52.slack.com/files-pri/T076SHX5W-F07CGBKK2/git-for-beginners-handout.pdf" Obtengo un encabezado de respuesta diferente del servidor de archivos:

Tenga en cuenta que me enviaron a una ubicación diferente en el encabezado de respuesta. Y en esa nueva ubicación obtengo un estado 200 ok.

Mis primeras preguntas: ¿hay alguna diferencia entre escribir manualmente la URL en el navegador y mediante XmlHttpRequest?
Por cierto, estoy usando el visor predeterminado de pdf.js (html css js), todas las funcionalidades funcionan, excepto solicitar un pdf de un origen diferente (problema de solicitud cruzada de ei oring)
Segunda pregunta: ¿cree que es un problema de mi parte o de la forma en que el visor.js/pdf.js predeterminado está haciendo XmlHttpRequest?

Gracias :)

Mis primeras preguntas: ¿hay alguna diferencia entre escribir manualmente la URL en el navegador y mediante XmlHttpRequest?

Sí, especialmente con solicitudes de origen cruzado. Cuando realiza una solicitud de origen cruzado, la solicitud solo se acepta si CORS la permite. El navegador emitirá una solicitud con el encabezado Origin , el servidor puede usar esto para decidir si aprueba la solicitud (al incluir el origen solicitado en el encabezado de respuesta Access-Control-Allow-Origin ).

Además, de forma predeterminada, las credenciales no se incluyen en las solicitudes de origen cruzado. Para incluir cookies, el servidor debe responder con Access-Control-Allow-Credentials: true y la solicitud XHR debe tener el atributo withCredentials establecido en true .

Segunda pregunta: ¿cree que es un problema de mi parte o de la forma en que el visor.js/pdf.js predeterminado está haciendo XmlHttpRequest?

Creo que su servidor debe estar configurado de manera diferente.

Consulte la documentación en MDN para obtener más información: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
O lea la especificación de CORS: https://www.w3.org/TR/2014/REC-cors-20140116/

hola roberto

Creo que solucioné el problema configurando también Access-Control-Allow-Credentials: true . Muchas gracias por la ayuda <3. Sin embargo, tengo otro problema con respecto a una redirección y no sé si podría darme algunos consejos. yo hago XHR
solicitud mediante la URL n.º 1 (el problema que me ayudan a solucionar). Luego obtengo una redirección a la URL n.º 2 (estado 302). Pero tanto la URL n.º 1 como la URL n.º 2 apuntan al mismo servidor. Causando el siguiente error:

Traté de establecer los mismos encabezados de respuesta que hice con la URL n. ° 1, pero me doy cuenta de que ambos están en el mismo servidor y Origin es nulo.

Creo que es porque ambas URL apuntan al mismo servidor, por lo que el origen de la redirección es NULL, pero no estoy muy seguro. Ahora, ¿cómo haría para agregar encabezados que traten con dos orígenes diferentes, pero ambas direcciones URL apuntan al mismo servidor de archivos? Intenté usar expresiones regulares como * pero aparentemente no está permitido :( ¡Nuevamente, gracias!

Después de una redirección de origen cruzado, Chrome establece el encabezado de origen en el valor "nulo" en lugar de la URL real: https://crbug.com/154967

Puede devolver de forma condicional un Access-Control-Allow-Origin con valor null , pero solo si desea que todos los sitios web puedan leer ese recurso . Si no es así (que es lo más probable), entonces debes evitar la redirección. Por ejemplo, enviando directamente la solicitud a la URL de destino (si no conoce la URL de antemano, agregue un nuevo extremo de API a su servidor que devuelva la URL de destino).

¡Gracias! Lo miraré :)

Hola, Rob, ¿crees que hay otra forma de inicializar el visor de pdf o pdf.js con el src ya configurado y evitar la solicitud XHR por completo?

@yjguoo Puede codificar en base64 los datos PDF y usar una URL de datos. Para archivos PDF grandes, esto resulta en una peor experiencia para el usuario (= página en blanco sin barra de progreso) porque codificar los datos como base64 aumenta el tamaño del archivo en un 33 %. Recomiendo seguir usando XHR por este motivo.

Hola, acabo de probar y funciona si CORS está habilitado, pero lo que veo es que no obtiene el archivo en fragmentos/rango si el archivo es muy grande.

Resuelto agregando esto en .htaccess:
Bytes de intervalos de aceptación del conjunto de encabezados
Conjunto de encabezado Access-Control-Allow-Origin "*"
Conjunto de encabezado Access-Control-Allow-Methods "GET"
Conjunto de encabezado Access-Control-Allow-Headers "Content-Type, Range"
Conjunto de encabezado Access-Control-Expose-Headers "Aceptar rangos, codificación de contenido, longitud de contenido, rango de contenido"

¡¡¡Gracias!!!

@Rob--W Fue muy útil. ¿Hay alguna posibilidad de que funcione desde dentro del proyecto (como cambiar los encabezados XHR)? (dentro de trabajador.js)

Hola, para cualquiera que todavía tenga problemas con esto, lo resolví con:

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