JavaScript 获取托管在另一个源上的文件大小，无需控制跨源标头

Question

这里有一个虚拟 PDF 文件可供下载：https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf

这是托管在

w3.org

上，所以我绝对无法控制响应标头。

我的要求是渲染一个

<a download href="...">Download PDF</a>

元素来下载文件，但在下载之前我还想获取文件大小并显示它。同源下，通过

(await fetch('...', { method: 'HEAD' })).headers.get('content-length')

可以做到这一点，但是我的做法被CORS挡住了：

这是预料之中的，因为它们不在同一区域。想知道是否有任何方法可以根据我不拥有或无法编辑托管我需要下载的文件的源的响应标头来解决此问题？

Answer 1

如果无法控制目标站点，您将需要像@Bergi 在评论中建议的那样，创建一个代理来获取 pdf 的大小。根据您使用的语言和框架，其实现会有所不同，但总体思路是，当访问您的 api 端点时，从您的后端向目标 pdf 发出 http 请求，获取大小，然后将其发送http 响应。由于您的后端代码不受浏览器强制执行的 CORS 规则的约束，因此它将能够成功检索您需要的信息。

您可以在 Mozilla 的开发人员文档网站

了解有关 CORS 及其工作原理的更多信息