如何在JavaScript中使用window.location或fetch API进行页面跳转的同时添加自定义请求头参数？

在JavaScript中，如果你想在页面跳转的同时使用自定义请求头，通常你会使用`fetch` API发起一个异步请求，然后在响应成功后再进行跳转。这是因为`window.location`直接修改地址栏的行为不具备发送请求的功能。以下是使用`fetch`的例子：

const customHeaders = {
  'Content-Type': 'application/json',
  // 其他自定义头
};

try {
  // 发送一个GET请求，将自定义头添加到options中
  const response = await fetch('http://example.com', {
    method: 'GET',
    headers: customHeaders,
  });

  // 检查响应状态码是否允许我们获取数据
  if (response.ok) {
    const data = await response.json(); // 假设返回的是JSON数据
    window.location.href = data.nextUrl; // 跳转到接收的数据指定的URL
  } else {
    console.error('An error occurred:', response.statusText);
  }
} catch (error) {
  console.error('Error fetching the page:', error);
}

如果不需要实际的数据交互，仅是为了设置请求头，你可以考虑使用`XMLHttpRequest`或`fetch`配合`navigator.sendBeacon`，后者适合在后台无痛地发送一些小量数据，比如网站访问计数：

// 不适用于需要获取响应的情况
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com', true);
xhr.setRequestHeader('Your-Header', 'Your-Value');
xhr.onload = function() {
  window.location.href = 'new-page.html'; // 直接跳转
};
xhr.send();