javascript - How to Intercept XMLHttpRequest and change request URL - Stack Overflow

admin管理员组

文章数量:1305023

My front send requests to the back server. How can I intercept this request, and redirect to another back? How can I change back's URL?

  const intercept = (urlmatch, callback) => {
  let send = XMLHttpRequest.prototype.send;
  XMLHttpRequest.prototype.send = function() {
    this.addEventListener('readystatechange', function() {
      if (this.responseURL.includes(urlmatch) && this.readyState === 4) {
        callback(this);
      }
    }, false);
    send.apply(this, arguments);
  };
};

Thanks!

My front send requests to the back server. How can I intercept this request, and redirect to another back? How can I change back's URL?

  const intercept = (urlmatch, callback) => {
  let send = XMLHttpRequest.prototype.send;
  XMLHttpRequest.prototype.send = function() {
    this.addEventListener('readystatechange', function() {
      if (this.responseURL.includes(urlmatch) && this.readyState === 4) {
        callback(this);
      }
    }, false);
    send.apply(this, arguments);
  };
};

Thanks!

• javascript
• node.js

Share Improve this question Follow asked Oct 26, 2018 at 8:47 AliceAlice 32366 silver badges1111 bronze badges 10

• What's the purpose? If it's possible that you may need another backend then urls should preferably constructed with base url constant that could be changed. Why are you trying to patch send and not open? – Estus Flask Commented Oct 26, 2018 at 8:56
• Do you mean without changing the code in frontend? – AkshayM Commented Oct 26, 2018 at 9:07
• @estus I need to create an intercpetor, which will redirect all frontend requests from one backend to another – Alice Commented Oct 26, 2018 at 9:15
• @AkshayMilmile Almost, just adding new function – Alice Commented Oct 26, 2018 at 9:18
• this seems like front-end code, are you trying to intercept at the GUI level? – mihai Commented Oct 26, 2018 at 9:28

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 8

This can be easily achieved by patching XMLHttpRequest open:

const intercept = (urlmatch, newurl) => {
  const open = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function (method, url, ...rest) {
    url = url.replace(urlmatch, newurl);
    return open.call(this, method, url, ...rest);
  };
}

intercept('http:/example./', 'http:/my-example./');

Modifying globals for local needs is a bad practice that may lead to unforeseen consequences.

Unless the goal is to tamper somebody else's application (for instance, with user script), a cleaner way is to modify the application to make it possible to change base url, e.g. from

makeRequest('http:/example./api/...')

to

makeRequest(BASE_API_URL + '...')

Where BASE_API_URL is application constant that can be changed on application initialization, with environment variables, globals, dependency injection, etc.

If an application uses some kind of a wrapper instead of XMLHttpRequest directly, base URL functionality may be implemented in a wrapper.

本文标签： javascriptHow to Intercept XMLHttpRequest and change request URLStack Overflow