在 Javascript 中为所有 http 请求添加自定义标头 [英] Adding custom headers in Javascript for all http requests

问题描述

我想向 ASP.Net Web 窗体应用程序中的每个 http 调用添加自定义标头(不记名令牌).

I want to add custom headers (Bearer token) to each http call in a ASP.Net Web Form application.

使用以下链接中的建议，我添加了将添加的标头发送到服务器的代码，但无济于事.

Using the recommendations in the following links, I added the code to send added headers to the server to no avail.

如何拦截包括表单提交在内的所有http请求

和

如何更改请求的标头?

<script>
    (function() { 
        (function (open) {
            XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
                console.log("Adding header");
                open.call(this, method, url, async, user, password);
                this.setRequestHeader("X-Hello", "There " + new Date());
            };
        })(XMLHttpRequest.prototype.open);
    })();
</script>

和

<script>
    (function() { 
        (function (send) {
            XMLHttpRequest.prototype.send = function (data) {
                console.log("Adding header");
                this.setRequestHeader("X-Hello", "There");
                send.call(this, data);
            };
        })(XMLHttpRequest.prototype.send);
    })();
</script>

我知道该解决方案应该只对 POST 有效(但事实并非如此.)我确实看到了每个帖子的 console.log，但标题X-Hello"从未在服务器端显示.

I understand that the solution is supposed to work only for the POSTs (but it doesn't.) I do see the console.log for every post, yet the header, "X-Hello" never shows on the server side.

使用 Service Worker 的长期解决方案失败了:

The long solution using the service worker failed on:

return Promise.resolve(new Request(data.url, data));

构建‘请求’失败:无法构建模式为‘导航’的请求和非空请求初始化的请求."

"Failed to construct 'Request': Cannot construct a Request with a Request whose mode is 'navigate' and a non-empty RequestInit."

推荐答案

一种方法是使用 Service Worker.但是，并非所有浏览器都支持此方法，因此请注意您的观众.使用 Service Worker，您将拦截所有通过浏览器的 fetch 请求.但是浏览器只允许您发送与当前来源相关的 url 的自定义标头.考虑到这一点，这里有一个代码示例.

One way to do this would be to use a service worker. However this method is not supported by all browsers, so watch your audience. With a service worker, you would intercept all the fetch requests that go through the browser. however browsers will only allow you to send custom headers for urls related to the current origin. With that in mind, here's a code sample.

//This is the fetch event listener
self.addEventListener("fetch", (event) => {
    var currentUrl = new URL(event.request.url);
    if (currentUrl.origin === location.origin){
        var newRequest = new Request(event.request, {
            mode: "cors",
            credentials: "same-origin",
            headers: {
                YOUR_CUSTOM_HEADER_NAME: YOUR_CUSTOM_HEADER_VALUE,
            }
        });
        event.respondWith(fetch(newRequest));
    }
    else {
        event.respondWith(fetch(event.request));
    }
});

此外，如果您使用常量、变量来存储标头值和名称，浏览器会将变量的名称(小写)作为标头名称(而不是它的值).

Also if you use a constant, variable to store the headers value and name, the browser will take the name of the variable(in lower case) as the header name(not it's value).

这篇关于在 Javascript 中为所有 http 请求添加自定义标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！