CORB issue with PDF preload

user_5594539 0
Viewed 998

I am working on optimizing my PDF viewer app and I would like to use link preload for PDF. The PDF download is triggered via XHR request (it's just PDF.js library in the background).

My idea is to preload PDF and then when JS bundle which handles PDF download is loaded the PDF is already in memory or at least some part of it so users see it faster.

The problem is that Chrome blocks my request saying:

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.

I have no idea why it happens. CORS is allowed and also there is no X-Content-Type-Options: np-sniff present. Any ideas?

Here is MWE. Just open the console and you will see the error.

<!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>

cross-origin-read-blocking google-chrome pdf javascript
1 Answers

You need to add the crossorigin attribute for preloading cross-origin fetch requests. Read more here and here.

The link should be configured as follows:

<!-- 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" />
user_85837390
Related