使用 JavaScript 添加自定义 HTTP 标头

Question

在 HTML 页面上，单击图像（“img”）或锚点（“a”）标记的链接时，我想为 GET 请求添加自定义标头。 这些链接通常用于下载动态内容。 这些标头可以是 SAML 标头或自定义应用程序特定标头。

是否可以通过 JavaScript 添加这些自定义标头？ 或者如果我通过XMLHttpRequest添加这些，我怎样才能实现下载功能？

此要求仅适用于 IE6 或 7。

Answer 1

如果您使用 XHR，则 setRequestHeader 应该可以工作，例如

xhr.setRequestHeader('custom-header', 'value');

PS 您应该使用 Hijax 来修改锚点的行为，以便在由于某种原因 AJAX 无法为您的客户端工作时（例如页面上其他地方的脚本被破坏），它可以工作。

Answer 2

我认为实现它的最简单方法是使用查询字符串而不是 HTTP 标头。

Answer 3

从浏览器内部向请求添加标头的唯一方法是使用 XmlHttpRequest setRequestHeader 方法。

将其与“GET”请求一起使用将下载资源。 关键在于以预期的方式访问资源。 表面上，您应该能够允许 GET 响应在短时间内可缓存，因此导航到新 URL 或创建带有 src url 的 IMG 标记应使用先前“GET”的缓存响应。 然而，这很可能会失败，尤其是在 IE 中，就缓存而言，IE 本身可能是一个法则。

最终我同意 Mehrdad 的观点，使用查询字符串是最简单、最可靠的方法。

另一个奇怪的替代方案是使用 XHR 向 URL 发出请求，表明您访问资源的意图。 它可以使用会话 cookie 进行响应，该会话 cookie 将由后续对图像或链接的请求携带。

Answer 4

到 2021 年，这可以通过 Service Workers 来实现。

首先，您必须在页面上注册一个 Service Worker。

// index.html
window.addEventListener('load', function () {
    navigator
        .serviceWorker
        .register('/service-worker.js');
});

在 Service Worker 中，通过调用 WindowOrWorkerGlobalScope.fetch() 方法。

// service-worker.js
self.addEventListener('fetch', function (event) {
    event.respondWith(async function () {
        let headers = new Headers()
        headers.append("X-Custom-Header", "Random value")
        return fetch(event.request, {headers: headers})
    }());
});

请注意，某些 Web 浏览器不会在开发人员控制台中显示修改后的请求。 在这种情况下，可以使用 tcpdump、Wireshark 等工具或在服务器日志中观察请求。