Как правильно переопределить XmlHttpRequest для передачи пользовательского ключа и значения в заголовках
Я пытался переопределить функцию XmlHttpRequest, чтобы получить собственный заголовок, который хранится в localStorage, поэтому при любом запросе мой собственный заголовок будет там. Также было бы идеальный, что этого можно было бы достичь, используя только ванильный JavaScript без Jquery.
Я попытался создать класс с методом переопределения, создав прототип, открыть и отправить методы, используя setRequestHeader для установки заголовка.
Он должен был переопределить собственную функцию xmlhttprequest, которая теперь получает заголовок «UserToken».
class overrideXmlHTTPRequest {
static override() {
const token = localStorage.getItem('userToken')
const xhttp = new XMLHttpRequest()
const xhrProto = XMLHttpRequest.prototype
const origOpen = xhrProto.open
xhrProto.open = function(method, url) {
this._url = url
return origOpen.apply(this, arguments)
}
xhrProto.send = function() {
xhrProto.setRequestHeader('UserToken', token)
}
}
}
export default overrideXmlHTTPRequest
Код работает некорректно, в заголовки ничего не приходит, как положено; Я пробовал просто использовать setRequestHeader("key" , "value"), для этой функции также требуется метод Open and send, собственный метод open и send у меня не работает; и я не использую fetch(); Я вызываю свой компонент .Vue, используя HttpXMLRequestOverride.override()
Вы выяснили, почему: var request = new XMLHttpRequest(); request.open( 'GET', 'someurl' ); request.setRequestheader( 'UserToken', localStorage.getItem('userToken') ); request.send(); не работает? Как указано в документах, вы должны вызвать setRequestHeader() после вызова .open(), иначе это не сработает. Поэтому, если нативные .open() и .send() у вас не работают, я не понимаю, что вы пытаетесь сделать, используя их внутри своей функции переопределения, поскольку тогда XMLHttpRequest.prototype.open.apply() тоже не должен работать.
Не могли бы вы показать, как вы это называете? Не зная, как вы вызываете .override(), мы не можем сделать макет вашего кода для его тестирования.
Я вызываю компонент vue, используя import HttpXMLRequestOverride from '../../override/HttpRequestOverride' и более поздние версии HttpXMLRequestOverride.override().
Ваша функция переопределения не вызывает .open() или .send() и не возвращает константу xhttp, так как же тогда вы на самом деле отправляете запрос? Вы создаете new XMLHttpRequest() после вызова .override() на предыдущем шаге, а затем вызываете .open() и .send() по этому запросу? Я бы посоветовал перестать думать о создании оболочки вокруг xmlhttp и просто выяснить, почему первоначальный код без этой сложности переопределения не работал.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы должны использовать прототип для XMLHttpRequest, чтобы переопределить метод отправки. В методе переопределения просто вызовите setRequestHeader перед отправкой.
Например:
XMLHttpRequest.prototype.send = function () {
...
this.setRequestHeader('my-header', 'my-value')
см. полный пример по адресу: https://runkiss.blogspot.com/2021/03/capture-xmlhttprequest-calls.html
1) В чем именно вопрос? Я так понимаю этот код не работает? 2) Какой смысл переопределять, когда можно просто добавить заголовок с
setRequestHeader(). 3) Я полагаю, вы еще не используетеfetch()? Так как это автоматически имеет параметр заголовков. 4) Можете ли вы показать код того, как вы это называете? Что-то вродеvar request = new overrideXmlHTTPRequest(); request.override();?