서로 다른 JS 라이브러리에서 생성된 모든 AJAX 요청을 가로채는 방법

서로 다른 JS 라이브러리에서 생성된 모든 AJAX 요청을 가로채는 방법

다른 JS 라이브러리(AngularJS, OpenLayers 등)를 사용하여 웹 앱을 구축하고 있으며 기록된 사용자 세션이 만료되었을 때(응답이 반환될 경우) 모든 AJAX 응답을 가로채는 방법이 필요합니다.401 Unauthorized로그인 페이지로 리다이렉트 합니다.

나는 Angular를 안다.JS 제공interceptors이러한 시나리오를 관리하지만 OpenLayers 요청에 이러한 주입을 달성할 방법을 찾지 못했습니다.그래서 저는 바닐라 JS 어프로치를 선택했습니다.

여기서 코드 조각을 찾았어요

(function(open) {

    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {

        this.addEventListener("readystatechange", function() {
            console.log(this.readyState); // this one I changed
        }, false);

        open.call(this, method, url, async, user, pass);
    };

})(XMLHttpRequest.prototype.open);

...이것을 수정했습니다만, 예상대로 동작하고 있는 것 같습니다(지난번 Google Chrome에서 테스트 했을 뿐입니다).

XMLHTTPRequest의 프로토타입을 수정하기 때문에 이것이 얼마나 위험한지 또는 심각한 성능 문제를 일으킬 수 있는지 궁금합니다.그런데, 유효한 대안이 있을까요?

업데이트: 요청을 보내기 전에 대행 수신하는 방법

앞의 트릭은 정상적으로 동작합니다.그러나 요청이 전송되기 전에 동일한 시나리오에서 헤더를 삽입하려면 어떻게 해야 합니까?다음을 수행합니다.

(function(send) {

    XMLHttpRequest.prototype.send = function(data) {

        // in this case I'm injecting an access token (eg. accessToken) in the request headers before it gets sent
        if(accessToken) this.setRequestHeader('x-access-token', accessToken);

        send.call(this, data);
    };

})(XMLHttpRequest.prototype.send);

이러한 유형의 기능 후크는 완벽하게 안전하며 다른 이유로 정기적으로 수행됩니다.

그리고 퍼포먼스에 미치는 유일한 영향은 실제로는 1대당 1개의 추가 기능 호출뿐입니다..open()또, 네트워크 콜이 관련하는 경우는, 아마 중요하지 않은 코드의 실행에도 대응할 수 있습니다.

---

IE 에서는, 이 동작은, I/E/E/E/E/E/E/E/E/E/E/E/E/ActiveXObjectAjax를 하는 제어 방법.올바르게 작성된 코드가 먼저 검색됩니다.XMLHttpRequest사용 가능한 경우 IE 7부터 사용할 수 있는 코드입니다.단, 이 코드를 사용하는 경우ActiveXObject사용 가능한 경우 훨씬 더 새로운 버전의 IE에서도 해당됩니다.

---

최신 브라우저에서는 인터페이스와 같은 Ajax 콜을 발행하는 다른 방법이 있기 때문에 Ajax 콜을 모두 후크하려면 단순히 후크만 하는 것이 아닙니다.XMLHttpRequest.

일부 버전의 IE(9 이하)에서는 XMLHttpRequests를 캐치할 수 없습니다.라이브러리에 따라서는, 우선 IE 독자적인 ActiveX 컨트롤을 찾을 수 있습니다.

물론 IE에서 엄격하지 않은 DOSCTYPE를 사용하는 경우에는 모든 내기가 무효가 되지만, 알고 계셨을 것입니다.

레퍼런스: CanIuse

Firefox Editor Firefox AMO 가 와 같이Rob W,

다음 코드는 XMLHttpRequest 동작을 변경합니다.디폴트로는 세 번째("async") 파라미터가 지정되지 않은 경우 true로 기본 설정됩니다.지정 및 정의되지 않은 경우 동기 HTTP 요청으로 요청을 변환하는 "false"와 같습니다.이로 인해 요청이 처리되는 동안 UI가 차단되며 XMLHttpRequest API의 일부 기능도 비활성화됩니다.

...

이 문제를 해결하려면 open.call(....)을 open.apply(this, 인수)로 바꿉니다.

다음은 참조 링크입니다.

https://xhr.spec.whatwg.org/ #the-open()-filen

이거 드셔보세요

let oldXHROpen = window.XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function(method, url, async, user, password) {

console.log({method});

// Show loader

 this.addEventListener('load', function() {
  console.log('load: ' + this.responseText);
  // Hide loader
 });
           
  return oldXHROpen.apply(this, arguments);
}

언급URL : https://stackoverflow.com/questions/25335648/how-to-intercept-all-ajax-requests-made-by-different-js-libraries