如何拦截所有http请求，包括表单提交 [英] How to intercept all http requests including form submits

问题描述

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

I would like to intercept all http requests going out from my web page and add a parameter to the request body. My page includes forms - I also want to capture form submits. I have tried using Jquery ajaxSend and Javascript's setRequestHeader but both did not work for me. How do I achieve this?

谢谢

推荐答案

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

服务工作者基本上充当代理服务器，位于Web应用程序，浏览器和网络（如果可用）之间。

Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available).

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

It takes the form of a JavaScript file that can control the web page/site it is associated with, intercepting and modifying navigation and resource requests

您可以通过以下方式从名为 sw.js 的文件中注册应用程序代码中的服务工作者：

You register a service worker in your application code from a file named, e.g., sw.js by doing this:

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 file（实际的服务工作者代码）：要拦截请求，请将 fetch 事件侦听器附加到调用 respondWith的服务工作者（）方法并使用事件对象中的 .request 成员执行某些操作：

And in the sw.js file (the actual service-worker code): To intercept requests, you attach a fetch event listener to the service worker that calls the respondWith() method and does something with the .request member from the event object:

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

只是通过请求不变的简单服务工作者看起来像这样：

A simple service worker that just passes through requests unchanged looks like this:

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

要向请求体添加一个参数，我认为你需要序列化请求，修改序列化请求，然后反序列化它以重新创建新请求，然后使用该新请求调用 fetch（...）。

To add a param to the request body, I think you need to serialize the request, modify that serialized request, then deserialize it to recreate a new request, then call fetch(…) with that new request.

所以我认为一个服务工作者会做所有这样的事情（未经测试）：

So I think a service worker that does all that would like this (untested):

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

注意： https://serviceworke.rs/request-deferrer_service-worker_doc.html ，来自服务工作者手册，是我解除了序列化（...）代码/方法的地方如何更改标题的答案请求？ - 值得一看，因为那里的代码有详细的注释解释它正在做什么

Note: https://serviceworke.rs/request-deferrer_service-worker_doc.html, a page from the Service Worker Cookbook, is where I lifted that serialize(…) code/approach from—by way of the answer at How to alter the headers of a Request?—and it’s worth taking a look at, because the code there has detailed annotations explaining what it’s all doing

这篇关于如何拦截所有http请求，包括表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！