Question

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

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

此要求仅适用于IE6或7。

Answer 1

如果您使用的是XHR，则setRequestHeader应该有效，例如

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

P.S。您应该使用Hijax来修改锚点的行为，以便在出于某种原因AJAX不能为您的客户端工作时（例如页面上其他位置的已破坏脚本），它可以正常工作。

Answer 2

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

Answer 3

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

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

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

另一个古怪的选择是使用XHR向URL发出请求，指示您访问资源的意图。它可以使用会话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})
    }());
});

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

使用JavaScript添加自定义HTTP标头

5 个答案: