Добавление пользовательских заголовков в Javascript для всех запросов http - PullRequest
Новая
       20

Добавление пользовательских заголовков в Javascript для всех запросов http

0 голосов
/ 07 мая 2019

Я хочу добавить пользовательские заголовки (токен на предъявителя) к каждому вызову http в приложении веб-формы ASP.Net.

Используя рекомендации в следующих ссылках, я добавил код для отправки добавленных заголовков на сервер безрезультатно.

Как перехватить все 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" никогда не отображается на стороне сервера. .

Длинное решение с использованием сервисного работника не удалось: 

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

"Не удалось сгенерировать запрос": невозможно сгенерировать запрос с запросом, режим которого "навигация" и непустой RequestInit. "

Ответы [ 2 ]

1 голос
/ 08 июля 2019

Один из способов сделать это - использовать сервисного работника.Однако этот метод поддерживается не всеми браузерами, поэтому следите за своей аудиторией.С работником службы вы перехватываете все запросы на выборку, которые проходят через браузер.однако браузеры позволят вам отправлять пользовательские заголовки только для 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));
    }
});

Также, если вы используете константу, переменную для хранения значения и имени заголовка, браузер примет имя переменной (в нижнем регистре) какимя заголовка (не его значение).

1 голос
/ 08 мая 2019

Вам нужно создать экземпляр XMLHttpRequest, чтобы использовать его . 

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

Вы бы не использовали Request напрямую ..., который создается внутри современный fetch(..) API . 

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