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

JavaScript get file size hosted on another origin without control of crossorigin headers

提问人：Aelita 提问时间：11/13/2023 更新时间：11/20/2023 访问量：16

问：

赏金将在 4 天后到期。这个问题的答案有资格获得 +50 声望赏金。艾丽塔想引起人们对这个问题的更多关注。

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

这是托管的，所以我绝对无法控制响应标头。w3.org

我的要求是渲染一个元素来下载文件，但在下载之前，我还想获取文件大小并显示它。在相同的起源下，这可以通过 来完成，但我的方法被 CORS 阻止了：<a download href="...">Download PDF</a>(await fetch('...', { method: 'HEAD' })).headers.get('content-length')enter image description here

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

CORS xmlhttprequest 提取

评论

2赞 Bergi 11/20/2023
使用代理 - 即创建自己的 API 来报告任意 Web 资源的文件大小
0赞 Bergi 11/20/2023
"我能够编辑托管文件的源的响应标头“ - 好吧，您已经说过您无法控制主机及其发送的标头，所以没有
0赞 Aelita 11/20/2023
您的意思是在后端我创建自己的 API 并向文件发送 HEAD 请求并将大小返回给前端吗？
1赞 Bergi 11/20/2023
是的，正是如此。
0赞 Bergi 11/20/2023
stackoverflow.com/questions/3076414/ 的副本...

答：

0赞 smallpepperz 11/27/2023 #1

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

您可以在 Mozilla 的开发者文档站点上了解有关 CORS 及其工作原理的更多信息

上一个：如何在 Next 13 中启用服务器端渲染？

下一个：提取后重定向到结果页面