Pdf.js: viewer.js 无法获取在线 PDF 流

相关问题为#522、#586 和#842

正如上述问题中提到的，这是用户必须使用代理或 CORS 自行修复的问题。

嗨布伦德，

“用户必须使用代理或 CORS 自行修复”的主要原因是什么？

重要的是，PDF 可以来自本地（上传），服务器作为文件，服务器作为“http://”之类的流。

作为图像 URL，PDF 阅读器应支持 HTTP URL。

谢谢

@jonasyuandotcom cors 允许您使用 http 从同一服务器获取 pdf。 然而，浏览器保护用户免于获取/发送数据到外部服务器。 这些服务器必须使用 http 标头来绕过此限制。

由于您的服务器端代理将位于与查看器相同的服务器上，因此可以接受。

@notmasteryet谢谢。 它在使用相同的服务器时有效

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

嗨乔纳斯，

我们不会最终实现这一点，因为由于浏览器安全限制，我们无法实现。 请参阅http://en.wikipedia.org/wiki/XMLHttpRequest#Cross -domain_requests

布伦丹

嗨@brendandahl

我想知道自2011年以来是否有任何更新？ 是否仍然无法解决 CORS 问题？

是的。 有关更多信息，请参阅https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq -xhr。

谢谢蒂姆！

嗨@timvandermeij。 感谢您的答复。 我尝试了许多解决方案，但仍然无法在我的 Web 服务器上允许 CORS。 你有任何 git 例子吗？

@Dassine你去http://mozilla.github.io/pdf.js/web/viewer.html?file=//async5.org/moz/pdfjs.pdf -- PDF 查看器加载http://async5.org /moz/pdfjs.pdf 。 注意 async5.org 允许 mozilla.github.io 获取文件。 否则，出于安全原因，Web 浏览器必须阻止访问远程文件。 这是网络上的标准做法，PDF.js 无法绕过浏览器的安全性。

如果您将浏览器控件嵌入桌面/移动应用程序，您可以使用 OS/Framework API 请求二进制数据，并将其作为 Uint8Array 传递给 PDF.js。

感谢@yurydelendik提供您的链接。 我知道 PDF.js 不管理 CORS。 我已经尝试过@timvandermeij和其他人发送的解决方案，但他们失败了。 下载 pdf.js 存储库后，我正在寻找正确的实施/修改解决方案。 谢谢

@yurydelendik我也有加载远程 PDF 文件的问题。 但是这个错误只发生在 Chrome 中。
PDF.js v1.0.1040（内部版本：997096f）
消息：检索 PDF“ http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal.pdf ”时出现意外的服务器响应 (0)。

您可以看到我尝试加载的 PDF 位于我无法控制的另一台服务器上。 但我仍然希望在我的 viewer.js 上显示这个 PDF

我对 CORS 没有太多经验，但我在服务器上创建了一个安全性最低的 crossdomain.xml 文件，但即便如此它也不起作用。

@hashbyte您将需要服务器的代理。一个非常简单的代理（由我开发）是 CORS Anywhere。只需在 PDF 文件的 URL 之前添加代理的 URL，例如

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

然后对这个 URL 进行 URL 编码，放入file参数中，你会得到一个可以打开任何页面的链接： https :

注意：如果 PDF 的 URL 不包含任何百分号或&字符，那么快速获取链接的更简单方法是在链接之前添加查看器 URL（因此，首先没有 URL 编码）。仅当您手动键入 URL 时才这样做（例如，在进行快速测试时）：
https://mozilla.github.io/pdf.js/web/viewer.html?file=https://cors-anywhere.herokuapp.com/ http://bhpr.hrsa.gov/healthworkforce/rnsurveys/rnsurveyfinal。 pdf

注意： CORS Anywhere 演示仅用于演示该功能。如果您要在访问者众多的网站上使用此功能，请自行托管 CORS Anywhere 实例，以避免在公共演示服务器上施加不公平的负载。如果我注意到 CORS Anywhere 的性能因滥用而爬行，您的来源将被列入黑名单。当您自己托管 CORS Anywhere 时，您只能通过originWhitelist配置参数来限制对您网站的访问，以避免这种滥用。

你好，
当我想从外国网址加载 pdf 时出现此错误

错误：文件来源与查看者的不匹配
throw new Error('文件源与查看器不匹配');

请帮忙！

当我想从外国网址加载 pdf 时出现此错误

@gildassamuel请参阅#6916 了解详情。

@jonasyuandotcom如果文件是自己管理的，可以把文件和pdfjs放在同一个文件服务器上。

嘿，我已按照说明在文件服务器上设置“Access-Control-Allow-Origin”，但我不断收到此错误：

http标头如下：

任何指针都将不胜感激，即使您不确定能否提供问题的一些可能原因。 非常感谢你！

@yjguoo错误消息和标题不相加。

我认为重定向目标缺少预期的标头。

访问chrome://net-internals/#events并重复这些步骤以查看日志中被阻止重定向的实际标头。

嗨 Rob 感谢您的快速回复，

我注意到当我手动输入请求的 url “https://files.dev52.slack.com/files-pri/T076SHX5W-F07CGBKK2/git-for-beginners-handout.pdf”时，我从文件服务器得到不同的响应头：

请注意，我被路由到响应标头中的不同位置。 在那个新位置，我的状态为 200 ok。

我的第一个问题：在浏览器中手动输入网址与通过 XmlHttpRequest 输入网址有什么不同？
顺便说一句，我正在使用默认的 pdf.js 查看器（html css js），除了从不同来源请求 pdf（ei 交叉 oring 请求问题）之外，所有功能都可以工作
第二个问题：您认为这是我的问题还是默认 viewer.js/pdf.js 执行 XmlHttpRequest 的方式

谢谢 ：）

我的第一个问题：在浏览器中手动输入网址与通过 XmlHttpRequest 输入网址有什么不同？

是的，尤其是跨域请求。 执行跨域请求时，只有在 CORS 允许的情况下才会接受该请求。 浏览器将发出带有Origin标头的请求，服务器可以使用它来决定是否批准请求（通过在Access-Control-Allow-Origin响应标头中包含请求的来源）。

此外，默认情况下，跨域请求中不包含凭据。 要包含 cookie，服务器必须以Access-Control-Allow-Credentials: true响应，并且 XHR 请求必须将withCredentials属性设置为true 。

第二个问题：您认为这是我的问题还是默认 viewer.js/pdf.js 执行 XmlHttpRequest 的方式

我认为您的服务器必须配置不同。

有关更多信息，请参阅 MDN 上的文档： https :
或者阅读CORS的规范： https :

嗨，罗伯，

我想我也通过设置Access-Control-Allow-Credentials: true解决了这个问题。 非常感谢您的帮助<3。 但是，我遇到了另一个关于重定向的问题，我不知道您是否可以给我一些指示。 我做 XHR
使用 URL#1 请求（你帮我解决的问题）。 然后我重定向到 URL#2（状态 302）。 但是 URL#1 和 URL#2 都指向同一个服务器。 导致以下错误：

我尝试设置与 URL#1 相同的响应标头，但我意识到它们都在同一台服务器上，并且 Origin 为空。

我认为这是因为两个 URL 都指向同一个服务器，所以重定向来源为 NULL 但我不太确定？ 现在我将如何添加处理两个不同来源但两个 URL 都指向同一个文件服务器的标头。 我尝试使用像 * 这样的正则表达式，但显然它是不允许的 :( 再次感谢您！

跨域重定向后，Chrome 将 Origin 标头设置为“null”值而不是实际 URL - https://crbug.com/154967

您可以有条件地返回一个具有价值null的Access-Control-Allow-Origin ，但前提是您希望所有网站都能够读取该资源。 如果不是（很可能），那么您必须避免重定向。 例如，通过直接向目标 URL 发送请求（如果您事先不知道该 URL，请向您的服务器添加一个新的 API 端点以返回目标 URL）。

谢谢！ 我会调查的：）

嘿，Rob，您是否认为还有另一种方法可以使用已设置的 src 来初始化 pdf 查看器或 pdf.js 并一起避免 XHR 请求？

@yjguoo您可以对PDF数据进行base64编码并使用数据URL。 对于大型 PDF 文件，这会导致更差的用户体验（=没有进度条的空白页面），因为将数据编码为 base64 会使文件大小增加 33%。 出于这个原因，我建议继续使用 XHR。

嗨，刚刚测试过，如果启用了 CORS，它就可以工作，但我看到的是，如果文件很大，它不会以块/范围获取文件。

解决了在.htaccess中添加这个：
标头集 Accept-Ranges 字节
标头集 Access-Control-Allow-Origin "*"
标头集访问控制允许方法“GET”
标头集 Access-Control-Allow-Headers "Content-Type, Range"
标头集 Access-Control-Expose-Headers "Accept-Ranges, Content-Encoding, Content-Length, Content-Range"

谢谢！！！

@Rob--W 这很有帮助。 它有没有可能从项目内部工作（比如更改 XHR 标头）？ （在worker.js中）

嗨，对于仍然遇到此问题的任何人，我解决了它：

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