如何拦截包括表单提交在内的所有http请求

Question

我想拦截所有从我的网页发出的http请求，并向请求主体添加一个参数。我的页面包含表单 - 我还想捕获表单提交。我尝试过使用 Jquery ajaxSend 和 Javascript 的 setRequestHeader，但两者都不适合我。我如何实现这一目标？

谢谢

Answer 1

https://developer.mozilla.org/en/docs/Web/API/Service_Worker_API

Service workers 本质上充当代理服务器，位于 Web 应用程序、浏览器和网络（如果可用）之间。

它采用JavaScript文件的形式，可以控制与之关联的网页/站点，拦截和修改导航和资源请求

您通过名为

sw.js

的文件在您的应用程序代码中注册服务工作者：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('sw.js').then(function(registration) {
      console.log('Service worker registered with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

在

sw.js

文件（实际的服务工作者代码）中：为了拦截请求，您将

fetch

事件侦听器附加到调用

respondWith()

方法的服务工作者，并对

.request

成员执行某些操作事件对象：

self.addEventListener('fetch', function(event) {
  event.respondWith(
    // intercept requests by handling event.request here
  );
});

一个简单的 service worker 只是通过请求不变的看起来像这样：

self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request)
  );
});

要向请求主体添加参数，您需要：

1. 序列化请求。
2. 修改那个序列化的请求。
3. 反序列化修改后的请求以创建新请求。
4. 致电

   fetch(…)

   提出新要求。

所以，做所有事情的服务人员看起来像这样（未经测试）：

self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetchWithParamAddedToRequestBody(event.request)
  );
});
function fetchWithParamAddedToRequestBody(request) {
  serialize(request).then(function(serialized) {
    // modify serialized.body here to add your request parameter
    deserialize(serialized).then(function(request) {
      return fetch(request);
    });
  }); // fixed this
}
function serialize(request) {
  var headers = {};
  for (var entry of request.headers.entries()) {
    headers[entry[0]] = entry[1];
  }
  var serialized = {
    url: request.url,
    headers: headers,
    method: request.method,
    mode: request.mode,
    credentials: request.credentials,
    cache: request.cache,
    redirect: request.redirect,
    referrer: request.referrer
  };  
  if (request.method !== 'GET' && request.method !== 'HEAD') {
    return request.clone().text().then(function(body) {
      serialized.body = body;
      return Promise.resolve(serialized);
    });
  }
  return Promise.resolve(serialized);
}
function deserialize(data) {
  return Promise.resolve(new Request(data.url, data));
}

注意： https://serviceworke.rs/request-deferrer_service-worker_doc.html，Service Worker Cookbook 中的一个页面，是我从中提取

serialize(…)

代码/方法的地方——通过在 https://stackoverflow.com/questions/35420980/how-to-alter-the-headers-of-a-request/35421644#35421644 上回答—— 值得一看，因为那里的代码有详细说明解释它在做什么的注释

Answer 2

试试这个代码：

(function(send) {

XMLHttpRequest.prototype.send = function(data) {

    var _valuToAdd = $("input[name='valuToAdd']").val();
    this.setRequestHeader('valueName', _valuToAdd);
    send.call(this, data);
};
})(XMLHttpRequest.prototype.send);

Answer 3

// Override the open method of XMLHttpRequest to intercept all requests
var originalOpen = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function(method, url) {
  console.log("Intercepted HTTP request: " + method + " " + url);
  originalOpen.apply(this, arguments);
};