HTML preload预加载资源与跨域问题详解及解决方法：如何修复“request credentials mode does not match”错误

在现代 Web 开发中，优化页面加载速度和提升用户体验至关重要。<link rel="preload"> 标签是一种非常有效的前端性能优化工具，它可以让浏览器资源预加载，在页面开始渲染之前提前加载关键资源。然而，在使用 preload 时，开发者常常会遇到与跨域资源加载相关的问题，例如“A preload for is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.”错误，那么如何正确使用 preload 呢？在这篇文章中，我们将深入探讨如何使用 preload 标签来提升网页性能，并详细解析跨域资源预加载过程中可能遇到的错误，特别是“request credentials mode does not match”问题。通过本文，你将学习如何修复这些常见错误，正确设置 crossorigin 属性，并掌握 preload 标签的最佳实践，帮助你加速网页加载，优化资源管理，全面提升用户体验。

什么是 `preload`？

<link rel="preload"> 是一个 HTML 标签，用于声明页面需要的资源，并在页面渲染之前开始加载这些资源。通过这种方式，可以减少资源加载时间，提升页面渲染速度。虽然 preload 中含有“load”一词，但它并不会实际加载和执行脚本，而是将资源调度到下载队列中，并给予更高的优先级。

HTML preload 基本用法

通常我们使用 <link> 标签加载 CSS 文件来为页面设置样式：

<link rel="stylesheet" href="styles/main.css" />

而在使用 preload 时，我们需要指定资源的路径和资源的类型：

<head>
  <meta charset="utf-8" />
  <title>Preload 示例</title>

  <link rel="preload" href="style.css" as="style" />
  <link rel="preload" href="main.js" as="script" />

  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <h1>网页内容</h1>
  <canvas></canvas>

  <script src="main.js" defer></script>
</body>

通过这种方式，我们可以在资源实际需要之前加载它们，从而减少渲染阻塞，提高页面加载性能。

解决 HTML preload 跨域资源加载问题

常见问题：跨域加载失败

在预加载跨域资源时，开发者可能会遇到以下跨域资源请求失败的错误提示：

A preload for xxx is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

这是因为在预加载跨域资源时，浏览器要求设置 crossorigin 属性，以确保请求的 CORS 模式与资源的实际请求相匹配。这个问题在加载字体文件等资源时尤为常见。

解决方法：使用 `crossorigin` 属性

为了解决这个问题，你需要在 <link> 标签中添加 crossorigin="anonymous" 属性。以下是一个修复错误的示例：

<link
  rel="preload"
  href="/fonts/font.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>

通过这种方式，你可以确保资源的 CORS 模式匹配，避免加载失败的问题。

crossorigin 属性详解

crossorigin 属性用于指定在跨域请求资源时应如何处理凭据（如 cookies 和 HTTP 认证信息）。当使用 preload 加载跨域资源时，正确配置 crossorigin 属性非常重要，否则可能导致预加载失败。

crossorigin 属性有以下三个值：

anonymous:
- 在这种模式下，浏览器会以匿名模式进行跨域请求，不会发送用户凭据（如 cookies）。
- 适用于大多数情况下的跨域资源加载，尤其是字体文件和图片预加载。
- 示例：
```
<link
  rel="preload"
  href="/fonts/font.woff2"
  as="font"
  crossorigin="anonymous"
/>
```
use-credentials:
- 这种模式下，浏览器会在跨域请求中包含用户凭据（如 cookies 和 HTTP 认证信息）。
- 适用于需要用户认证信息才能访问的资源，通常用得较少。
- 示例：
```
<link
  rel="preload"
  href="https://example.com/resource"
  as="script"
  crossorigin="use-credentials"
/>
```
默认值（不设置）:
- 如果不设置 crossorigin 属性，浏览器会根据资源的来源自动选择是否发送凭据。对于大多数情况下的跨域请求，建议显式设置 crossorigin 属性，以避免潜在的错误。

使用 crossorigin 的注意事项

字体文件: 由于安全限制，跨域加载字体文件时通常需要设置 crossorigin="anonymous"，否则会导致字体无法正确加载。
CORS 头: 服务器端需要正确配置 CORS 响应头，例如 Access-Control-Allow-Origin，以允许跨域请求。
错误处理: 如果资源请求没有正确设置 crossorigin 属性，可能会导致浏览器阻止资源加载，并在控制台中显示 CORS 相关的错误信息。

通过合理配置 crossorigin 属性，开发者可以确保跨域资源加载的安全性和一致性，从而有效解决跨域资源请求失败等问题。

其他 `preload` 的优势与使用技巧

使用 as 属性指定预加载资源的类型，不仅可以让浏览器正确缓存资源，还能应用正确的内容安全策略（CSP）以及设置合适的 Accept 请求头。

支持的 `as` 属性值

as 属性可以指定以下类型的内容：

fetch: 用于 fetch 或 XHR 请求的资源，如 ArrayBuffer、WebAssembly 或 JSON 文件。
font: 字体文件。
image: 图片文件。
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。

注意，font 和 fetch 的预加载需要设置 crossorigin 属性。

包含 MIME 类型

你可以为 <link> 元素添加 type 属性以指定资源的 MIME 类型，从而帮助浏览器判断是否需要加载该资源。例如：

<link rel="preload" href="image.avif" as="image" type="image/avif" />

这种方式可以确保浏览器仅在支持该资源类型时才进行加载，从而避免不必要的下载。

使用媒体查询预加载资源

<link> 元素还支持 media 属性，你可以利用这个属性根据用户的设备条件选择性地预加载资源。例如：

<link
  rel="preload"
  href="bg-image-narrow.png"
  as="image"
  media="(max-width: 600px)"
/>
<link
  rel="preload"
  href="bg-image-wide.png"
  as="image"
  media="(min-width: 601px)"
/>

这种方法可以有效地为不同屏幕尺寸的用户加载合适的资源，进一步优化页面加载性能。

通过脚本实现预加载

你还可以使用 JavaScript 动态添加预加载标签，例如：

const preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);