javascript - Cómo interceptar todas las solicitudes http, incluidos los envíos de formularios

ajax xmlhttprequest

Question

Me gustaría interceptar todas las solicitudes http que salen de mi página web y agregar un parámetro al cuerpo de la solicitud. Mi página incluye formularios: también quiero capturar los envíos de formularios. Intenté usar Jquery ajaxSend y setRequestHeader de Javascript, pero ambos no funcionaron para mí. ¿Cómo logro esto?

Gracias

Answer 1

prueba este código:

(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 2

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

Los trabajadores de servicios esencialmente actúan como servidores proxy que se ubican entre las aplicaciones web y el navegador y la red (cuando están disponibles).

Toma la forma de un archivo JavaScript que puede controlar la página web / sitio al que está asociado, interceptando y modificando la navegación y las solicitudes de recursos.

Usted registra un trabajador de servicio en su código de aplicación desde un archivo llamado, por ejemplo, sw.js haciendo esto:

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);
    });
  });
}

Y en el archivo sw.js (el código real de trabajador de servicio): para interceptar solicitudes, adjunta un detector de eventos de fetch al trabajador de servicio que llama al método respondWith() y hace algo con el miembro .request del objeto de evento:

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

Un trabajador de servicio simple que solo pasa solicitudes sin cambios se ve así:

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

Para agregar un parámetro al cuerpo de la solicitud, creo que necesita serializar la solicitud, modificar esa solicitud serializada, luego deserializarla para recrear una nueva solicitud, luego llamar a fetch(…) con esa nueva solicitud.

Así que creo que un trabajador de servicio que hace todo lo que se vería así (sin probar):

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);
    });
}
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));
}

Nota: https://serviceworke.rs/request-deferrer_service-worker_doc.html , una página del Service Worker Cookbook , es donde levanté ese código / enfoque de serialize(…) través de la respuesta en Cómo modificar el encabezados de una solicitud? —Y vale la pena echarle un vistazo, porque el código tiene anotaciones detalladas que explican lo que está haciendo todo