Как слушать когда и что передает заголовок XHR страницы?

Question

[Heretic Man]

Есть сайт (на Angular) где забиваю в поле цифры и с низу выдаются данные на эти цифры (при авторизации на странице). Хочу отловить имя и значение заголовка XHR при событии "input", а именно "Authorization:" "(ключ)".



а затем чтобы я самостоятельно как авторизированный мог отправлять запросы XHR:

var xhr = new XMLHttpRequest();

xhr.open('GET', 'https://zakup.sk.kz/eprocpko/api/nomenclatures?search=331311.100.00000&page=-1&size=9&sort=id,asc', false);
xhr.open('GET', 'https://zakup.sk.kz/eprocpko/api/nomenclatures?search=331311.100.00000&page=0&size=9&sort=id,asc', false);
xhr.setRequestHeader('Authorization', '(полученный ключ)');

xhr.send();

Answer 1

[Владимир Проскурин]

xhr.onreadystatechange = function() {
   if(this.readyState == this.HEADERS_RECEIVED) {
      var headers = xhr.getAllResponseHeaders(); // Тут заголовки
   }
}
xhr.send();

Вот полный пример, как получить заголовки в виде строки и преобразовать их в массив https://developer.mozilla.org/en-US/docs/Web/API/X...

UPD: вот так можно перехватить заголовки с "чужого" xhr

var send = XMLHttpRequest.prototype.send;
  XMLHttpRequest.prototype.send = function() {
    this.addEventListener('readystatechange', function() {
      // тут добавляем сравнение текущего урла  this.responseURL, чтобы обрабатывались только запросы, которые начинаются на такую строку
      if (this.readyState === 4 && this.responseURL.startsWith('https://zakup.sk.kz/eprocpko/api/nomenclatures?search')) {
        console.warn(this.getAllResponseHeaders());
      }
    }, false);
    send.apply(this, arguments);
  };

Comments

[Heretic Man]

а как слушать когда идет отправка этого заголовка? как прочитать заголовок вы показали я так понял

[Владимир Проскурин]

Фарид Ныгиметжанов, заголовки доступны в том моменте, где идет получение результата отправки запроса (как в моем примере). Поэтом, вам либо нужно внести изменения в код, который отправляет этот запрос, либо же настроить перехватчик, который будет слушать все ajax запросы. Например вот https://github.com/slorber/ajax-interceptor
Пример, код должен быть выполнен до отправки ajax запроса

AjaxInterceptor.addResponseCallback(function(xhr) {
    if(xhr.readyState == xhr.HEADERS_RECEIVED) {
      var headers = xhr.getAllResponseHeaders(); // Тут заголовки
   }
});

AjaxInterceptor.wire();

[Владимир Проскурин]

Фарид Ныгиметжанов, я кинул комментом выше, с ссылкой на гитхаб.

[Heretic Man]

Владимир Проскурин, а без доп. скриптов? дело в том что я все эти манипуляции хочу выполнять непосредственно в консоле. Покажите пожалуйста самый примитивный способ прослушки ajax (так чтобы можно было читать этот запрос) при каком-то событии

[Heretic Man]

Владимир Проскурин, Спасибо огромное дружище! за UPD. Заголовки прилетают!) Но мне нужен Request Headers там хранятся ключи авторизации.
Пробую подставить Request в эту строку console.warn(this.getAllResponseHeaders());

Выкидывает что Call стэк переполнен
ERROR RangeError: Maximum call stack size exceeded

[Владимир Проскурин]

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

var setRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
// Выполняется для каждого заголовка
XMLHttpRequest.prototype.setRequestHeader = function(key, value) {
	console.warn(key, value); // ключ значение
    setRequestHeader.call(this, key, value);
}

[Heretic Man]

Владимир Проскурин, вауууу ты крут!! ))) спасибо огромное! Работает!