PDF预加载的CORB问题答案

【问题标题】：CORB issue with PDF preloadPDF预加载的CORB问题
【发布时间】：2020-09-30 19:48:36
【问题描述】：

我正在优化我的 PDF 查看器应用程序，我想为 PDF 使用链接预加载。 PDF 下载是通过 XHR 请求触发的（它只是后台的 PDF.js 库）。

我的想法是预加载 PDF，然后在加载处理 PDF 下载的 JS 包时，PDF 已经在内存中或至少是其中的一部分，以便用户更快地看到它。

问题是 Chrome 阻止了我的请求：

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://core.ac.uk/download/pdf/159107963.pdf with MIME type application/pdf. See https://www.chromestatus.com/feature/5629709824032768 for more details.

我不知道为什么会这样。允许使用 CORS，并且不存在 X-Content-Type-Options: np-sniff。有什么想法吗？

这里是 MWE。只需打开控制台，您就会看到错误。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test preload</title>
  <link rel="preload" href="https://core.ac.uk/download/pdf/159107963.pdf" as="fetch" type="application/pdf"/>
</head>
<body>
</body>
</html>

【问题讨论】：

标签： javascript google-chrome pdf cross-origin-read-blocking

【解决方案1】：

您需要添加crossorigin 属性来预加载跨域获取请求。阅读更多 here 和 here。

链接配置如下：

<!-- use anonymous (default if blank) for credentials: 'same origin' -->
<link rel="preload" href="https://core.ac.uk/download/pdf/159107963.pdf" as="fetch" type="application/pdf" crossorigin />

<!-- set it to use-credentials for credentials: 'include' -->
<link rel="preload" href="https://core.ac.uk/download/pdf/159107963.pdf" as="fetch" type="application/pdf" crossorigin="use-credentials" />

【讨论】：