폼 제출을 포함한 모든 http 요청을 대행 수신하는 방법

폼 제출을 포함한 모든 http 요청을 대행 수신하는 방법

웹 페이지에서 나가는 모든 http 요청을 대행 수신하고 요청 본문에 파라미터를 추가하고 싶습니다.페이지에는 양식이 포함되어 있습니다.양식 제출도 캡처하고 싶습니다.Jquery ajax Send와 Javascript의 set Request를 사용해 보았습니다.헤더는 맞지만 둘 다 나에게 효과가 없었다.어떻게 하면 좋을까요?

감사해요.

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

서비스 워커는 기본적으로 웹 애플리케이션 및 브라우저와 네트워크(사용 가능한 경우) 사이에 있는 프록시 서버 역할을 합니다.

연관된 웹 페이지/사이트를 제어할 수 있는 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()method 및 doing with the somethod를 수행합니다..request이벤트 오브젝트의 멤버:

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

요청을 변경하지 않고 전달하는 단순한 서비스 워커는 다음과 같습니다.

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, 서비스 워커 쿡북의 한 페이지입니다.여기서 이 페이지를 열었습니다.serialize(…)https://stackoverflow.com/questions/35420980/how-to-alter-the-headers-of-a-request/35421644#35421644의 답변을 통해 코드/문헌을 확인할 수 있습니다.왜냐하면 코드에는 그 모든 기능을 설명하는 상세한 주석이 포함되어 있기 때문입니다.

다음 코드를 사용해 보십시오.

(function(send) {

XMLHttpRequest.prototype.send = function(data) {

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

언급URL : https://stackoverflow.com/questions/43813770/how-to-intercept-all-http-requests-including-form-submits