使用 JavaScript 添加自定义 HTTP 标头

Question

On an HTML page, while clicking the link of an Image ("img") or anchor ("a") tags, I would like to add custom headers for the GET request. These links are typically for downloading dynamic content. These headers could be SAML headers or custom application specific headers.

Is it possible to add these custom headers through JavaScript? Or if I add these through XMLHttpRequest, how can I achieve the download functionality?

This requirement is for IE6 or 7 only.

Answer 1

If you're using XHR , then setRequestHeader should work, eg

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

PS You should use Hijax to modify the behavior of your anchors so that it works if for some reason the AJAX isn't working for your clients (like a busted script elsewhere on the page).

Answer 2

I think the easiest way to accomplish it is to use querystring instead of HTTP headers.

Answer 3

The only way to add headers to a request from inside a browser is use the XmlHttpRequest setRequestHeader method.

Using this with "GET" request will download the resource. The trick then is to access the resource in the intended way. Ostensibly you should be able to allow the GET response to be cacheable for a short period, hence navigation to a new URL or the creation of an IMG tag with a src url should use the cached response from the previous "GET". However that is quite likely to fail especially in IE which can be a bit of a law unto itself where the cache is concerned.

Ultimately I agree with Mehrdad, use of query string is easiest and most reliable method.

Another quirky alternative is use an XHR to make a request to a URL that indicates your intent to access a resource. It could respond with a session cookie which will be carried by the subsequent request for the image or link.

Answer 4

As already said, the easiest way is to use querystring.

But if you cannot, because of security reason, you should consider using cookies.

Answer 5

In 2021, this can be accomplished with Service Workers .

First, you have to register a Service Worker on your page.

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

In the Service Worker a request is captured, modified and forwarded by calling the WindowOrWorkerGlobalScope.fetch() method.

// 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})
    }());
});

Please note that some web browsers does not show modified requests in the developer console. In that case requests can be observed with tools like tcpdump, Wireshark or in a server's logs.