PDF.js CORS 问题答案

【问题标题】：PDF.js CORS issuePDF.js CORS 问题
【发布时间】：2017-01-15 08:19:46
【问题描述】：

我遇到了 PDF.js 和 CORS 配置问题。

我从域 A 将 PDF.js 加载到一个 iframe 中，其中一个文件作为参数（服务器的完整路径，它将返回一个 pdf 文档）。 PDF.js 将使用origin: domain A 在域 B 的服务器上创建一个请求。域 B 的服务器返回带有标题 Access-Control-Allow-Origin: domain A 的 pdf 文档，到目前为止一切顺利。

在我的网络选项卡中，我看到了对服务器的请求，它返回 200 状态 OK，但 PDF.js 抛出错误 Unexpected server response (0) while retrieving PDF <url>。

问题是，这里发生了什么，CORS 似乎没问题，但我无法从 PDF.js 获得更多信息，真正的原因是 PDF 无法加载。有没有遇到同样情况的人？

【问题讨论】：

尝试不使用 iFrame。 iFrame 存在安全限制
@mplungjan 从文档来看，如果 CORS 设置正确，它应该可以工作，在我看来这似乎没问题，所以我想知道为什么这不起作用。此外，我不想与现有页面的 css/js 产生冲突，所以我想 canvas 将是唯一的选择，不确定这是否会在我必须支持的 IE9 等浏览器中顺利运行
看看github.com/mozilla/pdf.js/issues/1000#issuecomment-133756244，有帮助吗？
这确实是另一种选择，但我想知道为什么上述情况不起作用......
看起来您的 CORS 设置不起作用（顺便说一句，CORS HTTP 请求拒绝 200 OK 是正常的）。如果您确信您的设置是正确的，请尝试使用不带/代替 PDF.js 应用程序的常规 XHR 请求。如果这可行，请查看网络工作者位置来源。旧版浏览器也存在 CORS 问题 - 在问题中提供更多信息并链接到您的应用程序。

标签： javascript pdf

【解决方案1】：

当我在 pdfjslib.getDocument 中提供我的 PDF 文件的路径时，PDF.js 也会出现 CORS 问题。我通过在 getDocument 方法中提供 pdf 文件的数据 URI 解决了这个问题。我将 pdf 文件的数据 URI 设为：

dataURI = "data:text/plain;base64," + (Get base64 of PDF from online tool or you can generate it by javascript as well);

【讨论】：

如何通过js生成？
太棒了，它可以在 Chrome 和 FF 上运行。不是 IE 强硬...

【解决方案2】：

PDF.js 社区没有帮助，多年后仍然没有明确的答案让 viewer.html 与 cors 一起工作。要绕过所有阻止您跨浏览器问题的 JS 代码，您可以执行以下步骤：

这个解决方案是使用他们的默认 viewer.html，它已经很好地完成了，具有 css 和所有功能），而不必自己构建整个查看器。

确保当您使用 pdf.js 时，您的请求会发送标头 - ORIGIN
确保您使用的任何服务器，都可以为 CORS 附加标头，

IE：访问控制允许来源 *

如您所知，要使用查看器，您应该使用：https://yourserver/dir/viewer.html?file=PDF_URL

pdf 的 URL 应该是 urlencoded，所以当你传递链接时，使用代码：

var urlEncoded = encodeURI(url);

编辑 viewer.js

搜索加载 PDF 文件/URL 的函数（第 ~1325 行）： “var loadingTask = (0, _pdfjsLib.getDocument)”或“getDocument”
在该行之上，当您调用 viewer.html?file=url 时，从 get params 获取 pdf 的 url（如果您使用 CDN 服务器，可能有 get params）：

/*
fetch the filename and params from the [viewer.html?file=some.place/on.the/internet/somefile.pdf?Expiry=2343243&somekey=3342343&other], which is the part [some.place/on.the/internet/somefile.pdf?Expiry=2343243&somekey=3342343&other]
Note: Use regex if you please.... Here is just for simplicity sake
*/
let _realURL =  window.location.href;

// split away the html and get the file=xxxx
let getParamsIndex = _realURL.indexOf("?");
let fileParamKeyValue = _realURL.substring(getParamsIndex+1);

// get the pdf file plus all it's required get params (if exists)
let getEqualsIndex = fileParamKeyValue.indexOf("=");
let pdfFile = fileParamKeyValue.substring(getEqualsIndex+1);


//original line to search
loadingTask = (0, _pdfjsLib.getDocument)(parameters);

现在你有了pdf文件，你改变现有的代码如下：

//don't use this which breaks if your pdf requires get parameters
//var loadingTask = (0, _pdfjsLib.getDocument)(parameters);
//uses the pdfFile url link we created above
var loadingTask = (0, _pdfjsLib.getDocument)(pdfFile);

搜索“throw new Error('file origin does not match”，关于第1865行
注释掉这个 javascript 检查文件来源

 if (fileOrigin !== viewerOrigin) {
        //don't throw the error, allow the file to be retrieved!!!!
        //throw new Error('file origin does not match viewer\'s');
 }

注意：在第 1853 行，您将看到 -

var HOSTED_VIEWER_ORIGINS = ['null', 'http://mozilla.github.io', 'https://mozilla.github.io'];

您可以使用它来指定允许 CORS 的特定服务器，但是通过禁用 throws 异常，您可以接受任何服务器。无论如何，如果他们想让我们使用它，他们为什么还要把这个 HOSTED_VIEWER_ORIGINS 放在基础代码中？

【讨论】：

“这个解决方案是使用他们的默认viewer.html，”FWIW，我认为你最好从头开始重做查看器。它受到严重限制。例如，即使 pdf.js 可以使用 viewport 参数渲染到任意分辨率，您也不能放大 1000% 以上。它也没有触摸支持，甚至不响应 ctrl+wheel 之类的简单操作。 PDF.JS 本身是一个很好的 renderer 但这就是我要用它的全部。
你好，彼得。我同意。这是很久以前写的，经过数小时弄清楚如何更改基本代码以使其适用于外部链接。现在可能有更好的选择，我不必为我们当前的系统更新软件，因为大多数人现在可以轻松下载 PDF 查看器或已经下载了它。这是我不久前编写的在移动应用程序中显示 PDF 的解决方案。我会在未来的某个时候回到这个问题，因为我会回来更新我们的整个移动应用程序，如果找到更好的东西，我会发布相关链接。
嗨@sboy 你是绝对正确的，我真的应该指出你的回答非常有帮助，所以谢谢你！我刚刚结束了使用 PDF.JS 的自定义 PDF 查看器工作的 3 周——在 Chrome 中效果很好，但现在我正试图让它在 iOS 上工作......如果你发现其他有用的东西，我很想听听。干杯！

【解决方案3】：

终于找到问题了。我的服务器没有将 Access-Control-Allow-Credentials: true 标头传递给需要的响应（xhr 请求是使用 xhr.withCredential 发送的）。

CORS 现在工作正常。

在https://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/找到解决方案

【讨论】：