使用 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 中，这在涉及缓存的情况下可能有点自成一格。

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

另一个古怪的选择是使用 XHR 向 URL 发出请求，表明您打算访问资源。 它可以使用 session cookie 进行响应，该 cookie 将由后续的图像或链接请求携带。

Answer 4

如前所述，最简单的方法是使用查询字符串。

但是如果你不能，出于安全原因，你应该考虑使用 cookies。

Answer 5

在 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 等工具或在服务器日志中观察请求。