同域PDF文档的跨域问题答案

【问题标题】：Cross-origin problem with PDF documents in same domain同域PDF文档的跨域问题
【发布时间】：2021-08-18 20:54:04
【问题描述】：

我正在尝试为 PDF 文档创建 Iframe 叠加层。该文档位于“静态”文件夹中的同一域中，我可以在 iframe 中呈现他，但我无法获取其中的 HTML 结构，当我尝试访问时，会触发跨域问题。

Uncaught (in promise) DOMException: Permission denied to access 跨域对象的属性“文档”

我在 Bugzilla (Bugzilla error 911444) 中发现了这个错误/问题。目前我正在尝试仅针对 Firefox 制作此解决方案，因为其他浏览器在 Iframe 中呈现 PDF 的方式不同。

在我阅读的所有关于跨域问题的网站中，所有内容都将访问我域之外的文档，但在这种情况下，他是同一个域。

这是我的一些错误还是我的一些误解？

【问题讨论】：

只是为了确定，当您将 iframe 的 src 设置为 /static/uploads/solicitacaoExame.pdf 时会发生什么？
@ChrisG PDF 正常呈现。使用“/static/uploads/solicitacaoExame.pdf”或“127.0.0.1:5000/static/uploads/solicitacaoExame.pdf”会得到相同的结果。
我的猜测是 Mozilla 的 PDF 渲染器在内部使用了不同的域。
天哪，panik。不过谢谢你的回答。

【解决方案1】：

由于您在这里没有代码示例，我猜您将 pdf 直接加载到 iframe 中。执行此操作时，iframe 的内容不是 html 页面，因此无法通过 JavaScript 访问。

解决方案是创建一个使用pdf.js 呈现pdf 的小型html 页面。然后您就可以访问 iframe。

【讨论】：

前几天我尝试使用pdf.js，问题是这会将PDF渲染到画布上，效果不好，质量下降太多。但是，是的，我将 PDF 直接渲染到 iframe，当我这样做时，他在内部创建了 PDF 的 HTML 结构。这篇文章中的第一张图片link 是生成的结构。在这种情况下，我试图添加一个来创建叠加层。但实际上，可能无法访问此：/