我可以在尝试预加载 XHR 数据时添加自定义 headers 吗？

Question

我正在从 JS 代码触发 XHR。这个 render-blocking XHR 在每次页面加载时都会触发，所以我想在页面生命周期的早期获取它，与 JS 和 CSS 资源并行。在我的 index.html 中，我将添加以下代码：

<head>
  <link rel="stylesheet" href="style.css">
  <link rel="preload" as="fetch" href="/xhr-to-be-fetched-early">
</head>

XHR 请求需要一些自定义 headers，例如 authorization 和 Accept。有什么方法可以将这些 headers 添加到 link 标签，在 HTML 本身或通过 JS？还是无法缓存此类请求？

Answer 1

您不能在 link 请求中添加自定义 headers；当您使用 as 指定内容类型时，浏览器会根据内容类型自动应用正确的 headers，但您无权访问此生命周期。

您可以使用 <script async></script> 代替 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async，并使用额外的 headers 执行 fetch。它将与页面的其他资源并行执行。

Answer 2

不过，这是一个独特的情况，我突然想到一个想法，你如何用一个使用 XHR 请求数据的小 JS 片段替换你的预加载 link，或者 fetch ，或您喜欢的任何方法。替换为：

<link rel="preload" as="fetch" href="/xhr-to-be-fetched-early">

有了这个：

<script async>
    fetch('target-url', {
        headers: {
            'Content-Type': 'application/json',
            //add headers here
        }
    })
    .then(response => response.json())
    .then(response => console.log("Preloaded", response))
</script>

希望对您有所帮助，请参阅有关 fetch here 的更多信息。

async 脚本标记中的属性不是必需的，但如果数据有点大，它将有助于减少加载时间。

Answer 3

您无法真正将 headers 添加到 <link> 标记，但您可以在获取资源之前停止页面加载任何内容。

看到这样的东西：

const promiseOfSomeData = fetch("URL.com", { 
    // This is where you set the headers
    headers: {
        'X-My-Cool-Header': 'here'
    }
}).then(data => {
    return data;
});
window.onload = async () => {
    let someData = await promiseOfSomeJsonData;
    console.log(someData)
};

How can I make "onload" waiting for "fetch" complete?

我可以在尝试预加载 XHR 数据时添加自定义 headers 吗？

Can I add custom headers while trying to preload XHR data?

html

javascript

xmlhttprequest

fetch

preload