title: How to Intercept and Modify XHR?
body: <p>I read several answers about this question but I could not understand what I'm doing wrong. I wanted to be able to intercept and modify the requests and responses. The requests I get. The responses is not.</p>
  
  <p>The response of the request is a json I just wanted to be able to modify the urls of the response before arriving in the application</p>
  
  <pre><code> &lt;script&gt;
     let oldXHROpen = window.XMLHttpRequest.prototype.open;
  
     window.XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
         if (url.startsWith("http://example.com")) {
              url = url.replace("http://example.com", "https://site2.com");      
          } else if (url.startsWith("http://") || url.startsWith("https://")) {
              // do nothing with the url
          } else if (url.startsWith("//")) {
             url = "https:" + url;
          } else if (url.startsWith("/")) {
              url = "https://site2.com" + url;    
          } else if (url.startsWith(".")) {
              url = "https://site2.com" + url.replace("./", "/");     
          } else {
              url = "https://site2.com" + url;
          }
  
          // This should take care of the response but it is not working.
          this.addEventListener('load', function() {
              var original_response, modified_response;
  
              original_response = this.responseText;
              Object.defineProperty(this, "responseText", {writable: true});
  
              modified_response = JSON.parse(original_response);
              modified_response.htmlinfo = "woops! All data has gone!";
              this.responseText = JSON.stringify(modified_response);
         });
  
         return oldXHROpen.apply(this, arguments);
   }
   &lt;/script&gt;
  </code></pre>