Pdf.js: O viewer.js não pode fazer stream de PDF online

Os problemas relacionados são #522, #586 e #842

Conforme mencionado nos problemas acima, isso é algo que o usuário terá que corrigir por conta própria usando um proxy ou CORS.

Olá Brend,

qual é o principal motivo pelo qual "o usuário terá que corrigir por conta própria usando um proxy ou CORS"?

É importante que o PDF possa vir de local (upload), servidor como arquivo, servidor como fluxo como "http://".

Como URL de imagem, o leitor de PDF deve suportar URL HTTP.

Obrigado

@jonasyuandotcom o

Como o proxy do lado do servidor estará localizado no mesmo servidor que um visualizador, os cors ficarão bem com isso.

@notmasteryet obrigado. Funciona ao usar o mesmo servidor como

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

Olá Jonas,

Não implementaremos isso do nosso lado porque não é possível implementar devido a restrições de segurança do navegador. Consulte http://en.wikipedia.org/wiki/XMLHttpRequest#Cross -domain_requests

Brendan

Olá @brendadahl

Eu queria saber se há alguma atualização desde 2011? Ainda é impossível corrigir os problemas do CORS?

sim. Consulte https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq -xhr para obter mais informações.

Obrigado Tim!

Olá @timvandermeij. Obrigado pela sua resposta. Eu tentei muitas soluções, mas ainda não estou habilitado para permitir CORS no meu servidor web. Você tem algum exemplo de git?

@Dassine aqui está http://mozilla.github.io/pdf.js/web/viewer.html?file=//async5.org/moz/pdfjs.pdf -- PDF Viewer carrega http://async5.org /moz/pdfjs.pdf . Observe que o async5.org permite que o mozilla.github.io obtenha arquivos. Caso contrário, um navegador da Web precisa bloquear o acesso a um arquivo remoto por motivos de segurança. É uma prática padrão na web e não há nada que o PDF.js possa fazer para burlar a segurança dos navegadores.

Se você incorporar o controle do navegador em um aplicativo de desktop/móvel, poderá solicitar dados binários usando APIs de SO/Framework e passá-los para o PDF.js como Uint8Array.

Obrigado @yurydelendik por seus links. Eu sei que PDF.js não gerencia CORS. Já tentei as soluções enviadas por @timvandermeij e outras mas falharam. Estou procurando as soluções corretas de implementação/modificações assim que o repositório pdf.js for baixado. Obrigado

@yurydelendik Também estou tendo o problema de carregar o arquivo PDF remoto. Mas esse erro acontece apenas no Chrome.
PDF.js v1.0.1040 (compilação: 997096f)
Mensagem: Resposta inesperada do servidor (0) ao recuperar o PDF " http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal.pdf ".

Você pode ver que o PDF que tento carregar está em outro servidor sobre o qual não tenho controle. Mas ainda desejo mostrar este PDF no meu viewer.js

Não tenho muita experiência com CORS, mas criei um arquivo crossdomain.xml de segurança mínimo no meu servidor, mas mesmo assim não funciona.

@hashbyte Você precisará de um proxy para o servidor. Um proxy muito simples (desenvolvido por mim) é o CORS Anywhere. Basta acrescentar o URL do proxy antes do URL do arquivo PDF, por exemplo

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

Em seguida, codifique este URL e coloque-o no parâmetro file , e você receberá um link que pode abrir qualquer 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: Se o URL do PDF não contiver nenhum sinal de porcentagem ou & caracteres, então uma maneira mais fácil de obter um link rapidamente é apenas colocar o URL do visualizador antes do link (portanto, sem codificação de URL primeiro ). Faça isso apenas se você digitar a URL manualmente (por exemplo, ao fazer um teste rápido):
https://mozilla.github.io/pdf.js/web/viewer.html?file=https://cors-anywhere.herokuapp.com/ http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal. pdf

Observação: a demonstração do CORS Anywhere é fornecida apenas para demonstrar o recurso. Se você for usar esse recurso em um site com muitos visitantes, hospede você mesmo a instância CORS Anywhere, para evitar sobrecarregar o servidor de demonstração público. Se eu perceber que o desempenho do CORS Anywhere está sendo rastreado devido a abuso, sua origem será colocada na lista negra. Ao hospedar o CORS Anywhere você mesmo, você pode restringir o acesso ao seu site apenas por meio do parâmetro de configuração originWhitelist para evitar esse tipo de abuso.

Olá,
Eu tenho esse erro quando quero carregar pdf de url estrangeira

Erro: a origem do arquivo não corresponde à do visualizador
throw new Error('origem do arquivo não corresponde ao visualizador');

por favor ajude!

Eu tenho esse erro quando quero carregar pdf de url estrangeira

@gildassamuel veja #6916 para detalhes.

@jonasyuandotcom Caso o arquivo seja gerenciado por você mesmo, você pode colocar o arquivo e o pdfjs em um mesmo servidor de arquivos.

Ei, eu segui as instruções para definir um "Access-Control-Allow-Origin" no servidor de arquivos, mas continuo recebendo este erro:

Os cabeçalhos http são os seguintes:

Quaisquer indicações seriam apreciadas, mesmo se você não tiver certeza de que pode fornecer alguma causa possível para o problema. Muito obrigado!

@yjguoo A mensagem de erro e os cabeçalhos não se somam.

Eu acho que o destino de redirecionamento está sem os cabeçalhos esperados.

Visite chrome://net-internals/#events e repita as etapas para ver os cabeçalhos reais do redirecionamento bloqueado no log.

Oi Rob obrigado pela resposta rápida,

Percebo que quando insiro manualmente o URL solicitado "https://files.dev52.slack.com/files-pri/T076SHX5W-F07CGBKK2/git-for-beginners-handout.pdf" recebo um cabeçalho de resposta diferente do servidor de arquivos:

Observe que fui roteado para um local diferente no cabeçalho de resposta. E nesse novo local recebo um status 200 ok.

Minhas primeiras perguntas: existe uma diferença entre digitar manualmente a url no navegador e por meio de XmlHttpRequest?
BTW, estou usando o visualizador pdf.js padrão (html css js) todas as funcionalidades funcionam, exceto solicitar um pdf de origem diferente (ei problema de solicitação cruzada)
Segunda pergunta: você acha que é um problema do meu lado ou a maneira como o viewer.js/pdf.js padrão está fazendo o XmlHttpRequest

Obrigada :)

Minhas primeiras perguntas: existe uma diferença entre digitar manualmente a url no navegador e por meio de XmlHttpRequest?

Sim, especialmente com solicitações de origem cruzada. Quando você executa uma solicitação de origem cruzada, a solicitação só é aceita se a solicitação for permitida pelo CORS. O navegador emitirá uma solicitação com o cabeçalho Origin , o servidor pode usar isso para decidir se aprova a solicitação (incluindo a origem solicitada no cabeçalho de resposta Access-Control-Allow-Origin ).

Além disso, por padrão, as credenciais não são incluídas nas solicitações de origem cruzada. Para incluir cookies, o servidor deve responder com Access-Control-Allow-Credentials: true e a solicitação XHR deve ter o atributo withCredentials definido como true .

Segunda pergunta: você acha que é um problema do meu lado ou a maneira como o viewer.js/pdf.js padrão está fazendo o XmlHttpRequest

Eu acho que seu servidor deve ser configurado de forma diferente.

Consulte a documentação sobre MDN para obter mais informações: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Ou leia a especificação do CORS: https://www.w3.org/TR/2014/REC-cors-20140116/

Olá Rob,

Acho que consertei o problema também definindo Access-Control-Allow-Credentials: true . Muito obrigado pela ajuda <3. No entanto, recebo outro problema em relação a um redirecionamento e não sei se você poderia me dar algumas dicas. eu faço XHR
request usando URL#1 (o problema que você me ajuda a corrigir). Então recebo um redirecionamento para URL#2 (status 302). Mas tanto URL#1 quanto URL#2 apontam para o mesmo servidor. Causando o seguinte erro:

Tentei definir os mesmos cabeçalhos de resposta que fiz para URL # 1, mas percebi que ambos estão no mesmo servidor e a Origem é nula.

Eu acho que é porque ambos os URLs apontam para o mesmo servidor, então a origem do redirecionamento é NULL, mas não tenho certeza? Agora, como eu poderia adicionar cabeçalhos lidando com duas origens diferentes, mas ambas as URLs apontam para o mesmo servidor de arquivos. Eu tentei usar regex como * mas aparentemente não é permitido :( Mais uma vez obrigado!

Após um redirecionamento de origem cruzada, o Chrome define o cabeçalho Origin para o valor "null" em vez do URL real - https://crbug.com/154967

Você pode retornar condicionalmente um Access-Control-Allow-Origin com valor null , mas somente se quiser que todos os sites possam ler esse recurso . Se não (o que é mais provável), você deve evitar o redirecionamento. Por exemplo, enviando a solicitação diretamente para o URL de destino (se você não souber o URL com antecedência, adicione um novo endpoint de API ao seu servidor que retorne o URL de destino).

Obrigada! vou pesquisar sobre isso :)

Ei Rob, você acha que existe outra maneira de inicializar o visualizador de pdf ou pdf.js com o src já definido e evitar a solicitação XHR todos juntos?

@yjguoo Você pode codificar em base64 os dados do PDF e usar um URL de dados. Para arquivos PDF grandes, isso resulta em uma experiência do usuário pior (= página em branco sem barra de progresso) porque codificar os dados como base64 aumenta o tamanho do arquivo em 33%. Eu recomendo continuar usando o XHR por esse motivo.

Oi, acabei de testar e funciona se o CORS estiver ativado, mas o que vejo é que não obtém o arquivo em pedaços/intervalo se o arquivo for muito grande.

Resolvido adicionando isso em .htaccess:
Conjunto de cabeçalhos de bytes de intervalos de aceitação
Conjunto de cabeçalho Access-Control-Allow-Origin "*"
Conjunto de cabeçalhos Access-Control-Allow-Methods "GET"
Conjunto de cabeçalhos Access-Control-Allow-Headers "Content-Type, Range"
Conjunto de cabeçalhos Access-Control-Expose-Headers "Accept-Ranges, Content-Encoding, Content-Length, Content-Range"

Obrigada!!!

@Rob--W Foi muito útil. Existe alguma possibilidade dele funcionar de dentro do projeto (como alterar os cabeçalhos XHR)? (dentro do worker.js)

Oi, para quem ainda está tendo problemas com isso, eu resolvi com:

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