Question

我想向ASP.Net Web窗体应用程序中的每个http调用添加自定义标头（承载令牌）。

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

How to intercept all http requests including form submits

和

<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”

使用服务工作者的长期解决方案失败了：

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

“无法构造'Request'：无法使用模式为'navigate'且非空RequestInit的请求构造请求。”

Answer 1

您需要实例化XMLHttpRequest to use it。

var x = new XMLHttpRequest();
x.open("GET","http://some.url");
x.setRequestHeader("X-Hello","There");
x.send();

您不会直接使用modern fetch(..) API内部创建的Request。

fetch("http://some.url",{ method:"GET", headers: { "X-Hello": "There" }})
.then(function onRes(res){
   if (res && res.ok) {
      // ..
   }
});

Answer 2

一种方法是使用服务工作者。但是，并非所有浏览器都支持此方法，因此请注意您的听众。与服务工作者一起，您将拦截通过浏览器的所有提取请求。但是，浏览器仅允许您发送与当前来源相关的url的自定义标头。考虑到这一点，这是一个代码示例。

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

此外，如果您使用常量变量存储标头的值和名称，浏览器将以变量名（小写）作为标头名（不是它的值）。

Answer 3

试试这个：-

XMLHttpRequest.prototype.open = (function(open) {
  return function(method,url,async) {
    open.apply(this,arguments);
    this.setRequestHeader('customHeader1', 'someValue');
    this.setRequestHeader('customHeader2', 'someOtherValue');
    };
})(XMLHttpRequest.prototype.open);

在Javascript中为所有http请求添加自定义标头

3 个答案: